运行ReactNative的开源工程
<p>在学习 React Native 的过程中, 需要多学习其他人的代码, 则运行其他项目必不可少. 完整的 <code>React Native</code> 包含两个部分, <code>Android</code> 和 <code>iOS</code> . 本文介绍一些在运行时的注意事项. 不要太纠结于全平台, 优先学习iOS平台.</p> <p><img src="https://simg.open-open.com/show/4a5b9702548f231c568f052c8aa0f62b.png" alt="运行ReactNative的开源工程" width="800" height="427"></p> <p>React Native</p> <h2>运行 iOS 版</h2> <p>React Native 的规范或编码更偏向于 iOS, 同时一些开源项目仅支持 iOS版本. 因此, 在运行时, 优先从 iOS 版本入手.</p> <p>安装NPM, <code>npm install</code>, 下载 Node 库的依赖.</p> <blockquote> <p>未安装库, 错误: <code>'RCTRootView.h' file not found</code></p> </blockquote> <p>进入工程目录的 <code>ios</code> 文件夹, 启动<code>xxx.xcodeproj</code>文件. 使用 <code>Xcode</code> 启动, 或 使用 <code>open xxx.xcodeproj</code> 均可.</p> <p>直接运行项目, 即可显示. iOS 工程会自启动服务, 加载本地数据.</p> <h3>错误</h3> <p><strong><code>react-tools → aft</code>无法下载</strong></p> <p>依赖的 RN 版本过低. 升级 RN 的版本, 即可, 目前低于版本16, 均无法下载 <code>aft</code> . RN 还在迭代过程中, 低版本不会向下兼容, 要抱有探索精神.</p> <blockquote> <p>测试0.15.0的aft可以下载, 时间较长, 耐心等待.</p> </blockquote> <pre> <code class="language-java">loadDep:react-tools → aft ▌ ╢██████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░╟</code></pre> <p>依赖 RN 的位置, <code>package.json</code> , 修改 <code>react-native</code> 项为较高版本. 高版本与低版本可能会不兼容.</p> <blockquote> <p>在版本号前需要添加<code>^</code>, 如<code>^0.18.0</code>.</p> </blockquote> <pre> <code class="language-java">{ "name": "WeatherProject", "version": "0.0.1", "private": true, "scripts": { "start": "node_modules/react-native/packager/packager.sh" }, "dependencies": { "react-native": "^0.18.0" } }</code></pre> <blockquote> <p>RN 的版本号列表, <a href="/misc/goto?guid=4959671247743590692">参考</a></p> </blockquote> <p><strong>低版本兼容</strong></p> <p>Log类接口修改, 添加 <code>RCTLogSource source</code> 即可.</p> <pre> <code class="language-java">RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message)</code></pre> <h2>运行 Android 版</h2> <p>多数 Demo 不包含 Android 版本. 直接于项目中, 观察 <code>index.android.js</code> 文件. 如果文件中添加新的模块, 则表示支持 Android 版; 如果是默认的<code>HelloWorld</code>, 则表示不支持. 不支持就不必启动, 使用 iOS 版本即可.</p> <p>不支持 Android 版本的原因, 主要是 React Native 的控件有一部分是有区分的, 专门开发 Android 版或 iOS 版. 默认控件通过后缀区分, <strong>IOS</strong> 表示 iOS 独有, <strong>Android</strong> 表示 Android 独有, 未添加则表示两者均可.</p> <p>使用 <code>react-native</code> 命令启动 Android 项目.</p> <pre> <code class="language-java">react-native run-android</code></pre> <p>即shell命令: <code>cd android && ./gradlew installDebug</code></p> <p>注意修改 Gradle 的构建版本</p> <pre> <code class="language-java">classpath 'com.android.tools.build:gradle:1.2.3'</code></pre> <blockquote> <p>否则报错:</p> <code>Error while uploading app-debug.apk : Unknown failure</code> </blockquote> <p>低版本 RN 运行 Android 项目, 问题多多, 请耐心解决. 推荐使用 iOS 进行学习与演示.</p> <p>运行项目只是开始, 要想熟练使用, 还要多多练习 RN 的编码风格.</p> <p>OK, that's all! Enjoy it!</p> <p><br> </p> <p>文/SpikeKing(简书作者)<br> 原文链接:http://www.jianshu.com/p/e366cffec87a<br> </p>
本文由用户 ubkl3463 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
转载本站原创文章,请注明出处,并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台,欢迎各类分享!