运行ReactNative的默认工程UIExplorer
VickiJ31
9年前
<p>使用 React Native 框架可以使用相同的代码编写不同平台的应用. 在学习过程中, 既会兼顾老朋友 <code>Android</code> , 有要熟悉新朋友 <code>iOS</code> . 本文主要介绍运行 RN 的默认工程 UIExplorer .</p> <p>工作环境是 <code>Mac</code> + <code>V*N</code> + <code>Android Studio</code> + <code>Xcode</code> + <code>PyCharm</code> + <code>华为P8(Android 5.0)</code> + <code>iPhone 6S 模拟器</code>.</p> <p>时间: 2016年4月6日, <code>React Native</code> 最新版, 让我们重新开始吧.</p> <p><img src="https://simg.open-open.com/show/bbe710c3a589ccd23777e49c1991e5db.png" alt="运行ReactNative的默认工程UIExplorer" width="512" height="357"></p> <p>React Native</p> <blockquote> <p>前置的环境配置, 参考ReactNative官网的<a href="/misc/goto?guid=4959671246852321691">Requirements</a>. 需要安装一些工具. 本文介绍在启动项目时, 容易导致的一些问题.</p> </blockquote> <h2>Android配置</h2> <p>GitHub 的 <code>React Native</code> 项目, <a href="/misc/goto?guid=4958869360543124738">参考</a>. RN 项目较新, 问题可能会比较多, 我会详细介绍, 可能遇到的问题, 让大家更多地了解这个有趣的项目.</p> <p>下载 React Native 项目</p> <pre> <code class="language-java">git clone https://github.com/非死book/react-native.git</code></pre> <p>进入 <code>React Native</code> 文件夹, 编译 Android 项目.</p> <pre> <code class="language-java">./gradlew :Examples:UIExplorer:android:app:installDebug</code></pre> <blockquote> <p>可能需要下载 <code>gradle</code> , 大小约100M+, 比较慢, 耐心等待.</p> </blockquote> <p>构建完成之后, RN 的 App 已经成功安装到手机中.</p> <p><img src="https://simg.open-open.com/show/eebf157a985368dbed1471139bfd4957.png" alt="运行ReactNative的默认工程UIExplorer" width="512" height="910"></p> <p>Android</p> <h3>常见错误</h3> <p><strong>下载失败</strong>: 需要删除文件, 重新下载即可, 如:</p> <pre> <code class="language-java">Could not expand ZIP '/Users/wangchenlong/Exercises/ReactNative/react-native/ReactAndroid/build/downloads/boost_1_57_0.zip'</code></pre> <p>删除即可</p> <pre> <code class="language-java">rm /Users/wangchenlong/Exercises/ReactNative/react-native/ReactAndroid/build/downloads/boost_1_57_0.zip</code></pre> <blockquote> <p><code>Boost</code> 是 Cpp 重要的库, 比较大100M左右, 下载较慢.</p> </blockquote> <p><strong>安装错误</strong>: Gradle 的编译版本过高, 不兼容部分5.0+手机, 需要降低版本为 1.3.</p> <pre> <code class="language-java">Installing APK 'app-debug.apk' on 'HUAWEI GRA-TL00 - 5.0.1' for app:debug Error while uploading app-debug.apk : Unknown failure ([CDS]close[0])</code></pre> <p>使用 <code>Android Studio</code> 打开 <code>React Native</code> 的项目, 修改最外层工程的 <code>build.gradle</code> 配置, 降低 <code>gradle</code>的 <code>build</code> 为1.2.3版本.</p> <pre> <code class="language-java">buildscript { repositories { jcenter() mavenLocal() } dependencies { classpath 'com.android.tools.build:gradle:1.2.3' // 修改1.2.3 classpath 'de.undercouch:gradle-download-task:2.0.0' // NOTE: Do not place your application dependencies here; they belong // in the individual module build.gradle files } }</code></pre> <p>需要重新设置 Gradle 的 Wrapper , 修改为2.2版本.</p> <pre> <code class="language-java">Gradle version 2.2 is required. Current version is 2.11</code></pre> <p><strong>NDK路径</strong>: 在工程的 <code>local.properties</code> 中, 添加 NDK 的路径.</p> <pre> <code class="language-java">ndk.dir=/Users/wangchenlong/Installations/android-ndk-r10e</code></pre> <h2>服务配置</h2> <p>安装 NPM 的插件, 可能会需要权限进行存储, 时间较长, 耐心等待.</p> <pre> <code class="language-java">sudo npm install</code></pre> <blockquote> <p>NPM 安装 React Native 的支持库. RN 是 JavaScript 编写的, 需要 Node 环境支持.</p> </blockquote> <p>修改 ADB 的 TCP 端口号, 映射为8081, 针对于5.0以上手机有效.</p> <pre> <code class="language-java">adb reverse tcp:8081 tcp:8081</code></pre> <blockquote> <p>5.0以下的手机, 检测当前的网络IP地址, 手动添加入App.</p> </blockquote> <p>启动服务</p> <pre> <code class="language-java">npm start</code></pre> <p><img src="https://simg.open-open.com/show/d78a103207544da5ad2b6a01f8c18086.jpg" alt="运行ReactNative的默认工程UIExplorer" width="1322" height="1140"></p> <p>Server</p> <p><strong>晃动</strong> Android 手机, 即进入菜单页面, 选择 <code>Reload JS</code> 项, 重新加载页面即可显示.</p> <p><strong>OK, Android 项目加载成功!</strong></p> <h3>修改下载源</h3> <p>使用淘宝的 <code>NPM</code> 下载源, 可以加快下载速度.</p> <pre> <code class="language-java">npm config set registry=http://registry.npm.taobao.org/</code></pre> <p>配置地址在根目录的 <code>.npmrc</code> 中, 即</p> <pre> <code class="language-java">registry=http://registry.npm.taobao.org/</code></pre> <h2>iOS配置</h2> <p>相比于 Android 配置的复杂性, iOS 配置比较简单. 需要升级 <code>Xcode</code> 的最新版本.</p> <p>在 Xcode 中, 启动 <code>UIExplorer</code> 项目中的<code>UIExplorer.xcodeproj</code>即可.</p> <p><strong>不要关闭服务</strong>, 运行项目, 会自动加载数据.</p> <p><img src="https://simg.open-open.com/show/9be1b91bc9e13cf1fddc870d599f79ed.png" alt="运行ReactNative的默认工程UIExplorer" width="512" height="911"></p> <p>iOS</p> <p>Android 和 iOS 的配置都已经完成, 都可以运行自带 Demo - <code>UIExplorer</code> .</p> <p>让我们继续学习新的知识吧, 运行 <code>Hello World</code> 是成功的一半.</p> <p> </p> <p>OK, that's all! Enjoy it!</p> <p><br> 文／SpikeKing（简书作者）<br> 原文链接：http://www.jianshu.com/p/bcaaf51a9d0b<br> </p>