Android原生APP中添加ReactNative进行混合开发教程
ttwg5880
7年前
<p><strong>背景</strong></p> <p>React Native出来已经一段时间了，相对来说也算稳定了，在很多的企业中都实际使用他们，混合开发已经是未来的一种趋势，混合开发中使用的技术很多，不外乎Html5、JS框架通过一定的技术和原始交互，目前主流混合开发React Native、Cordova、APICloud、MUI、AppCan、Sencha Touch、jQuery Mobile等等(其他的小伙伴们自己收集)，目前网上写教程的人很多，但是React Native更新速度很快，根据他们的教程，中间会遇到各种问题，今天我和大家一起踩踩各种坑，让小伙伴们快速集成到自己的APP中。</p> <p>集成的小伙伴一定要注意图片中标注和备注哦，不然有可能会走弯路哦</p> <p><strong>集成步骤</strong></p> <p>参考官方文档->react native 文档</p> <p>本文使用开发环境 Android studio</p> <p>注意最新的React Native支持的最新的SDK为16(android4.1)</p> <p>npm环境，小伙伴们自己安装 nodeJS自己安装，可以参考官方文档安装环境，有问题可以发411437734@qq.com沟通</p> <p>创建Android项目(已有项目跳过)</p> <p><strong>1.打开Android studio</strong></p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/80c665a6aa3d8a4ecc09d966bca18bad.jpg"></p> <p><strong>2.输入项目名称，选择项目目录，点击next</strong></p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/027294c56d12766cd0867157ecb79b62.jpg"></p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/878a582f0fc200c655c3406a13cca15b.jpg"></p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/0d254bdb623ce5e2435bccffef460f79.jpg"></p> <p style="text-align:center"><img src="https://simg.open-open.com/show/05d290fcc8858bf469b689bb65790e40.jpg"></p> <p>至此项目创建完成(需要注意的是最新的React Native支持最新SDK版本为16 android4.1)</p> <p><strong>React Native集成到上面我们创建的ReactNativeAPPDemo中</strong></p> <p>参考非死book react native文档</p> <p>1.进入项目根目录，添加JS到项目中-点击Android studio中的Terminal(如下图)</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/8f0883cded3f04427b3e62044324690b.jpg"></p> <p>分别执行一下语句</p> <pre> <code class="language-java">npm init npm install --save react react-native curl -o .flowconfig https://raw.githubusercontent.com/非死book/react-native/master/.flowconfig </code></pre> <p>init 主要根据提醒生成package.json文件</p> <p>install --save react react-native 安装React 和React Native</p> <p>curl -o .flowconfig https://raw.githubusercontent.com/非死book/react-native/master/.flowconfig 下载.flowconfig文件</p> <p>参考图片</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/fa6a2c0a343eef37734f1e8b66eb237b.jpg"></p> <p>查看项目中有node_modules，说明react和react native 安装完成</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/2d032740d29c011ce326399cf521881b.jpg"></p> <p><strong>在项目根目录添加.flowconfig</strong></p> <p>参考下图</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/8a92d273b34daf21f14b96924916283f.jpg"></p> <p>也可以手动创建在浏览器打开 <a href="/misc/goto?guid=4959731211145414784" rel="nofollow,noindex">https://raw.githubusercontent.com/非死book/react-native/master/.flowconfig</a> 网址复制内容创建文件 </p> <p style="text-align:center"><img src="https://simg.open-open.com/show/14f721ec762f8bdfe147caf8a8236411.jpg"></p> <p><strong>ReactNativeAppDemo配置相关内容</strong></p> <p>1.添加"start": "node node_modules/react-native/local-cli/cli.js start" 到package.json 文件下 scripts标签 修改前</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/eb4e3e47aaf74701ab2a5bacb1a491a1.jpg"></p> <p>修改后</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/3254749ec0f1cb1b66521c21f3054101.jpg"></p> <p>2.添加index.android.js文件到项目中</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/d8419ffdc8ffd4ed582c57486f8c7867.jpg"></p> <pre> <code class="language-java">'use strict'; import React from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; class HelloWorld extends React.Component { render() { return ( <View style={styles.container}> <Text style={styles.hello}>Hello, World</Text> </View> ) } } var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', }, hello: { fontSize: 20, textAlign: 'center', margin: 10, }, }); AppRegistry.registerComponent('HelloWorld', () => HelloWorld); </code></pre> <p>至此React native配置基本完成</p> <p>3.App build.gradle配置</p> <pre> <code class="language-java">dependencies { ... compile "com.非死book.react:react-native:+" // From node_modules.} </code></pre> <p>这里注意不要使用maven中的，因为我们使用的是我们本地node_modules中的，注意最新版本中支持的是23，appcompat-v7:23.0.1，暂时没有试24的api</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/14d3ec585c1761ef6018af9531eae634.jpg"></p> <p><strong>整个工程build.gradle配置</strong></p> <pre> <code class="language-java">allprojects { repositories { ... maven { // All of React Native (JS, Android binaries) is installed from npm url "$rootDir/node_modules/react-native/android" } } ... } </code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/4ce0265c5ef053063f6a68a374d72e24.jpg"></p> <p>添加<uses-permission android:name="android.permission.INTERNET" />到AndroidManifest.xml:</p> <p><strong>确定External Libraries</strong></p> <p style="text-align:center"><img src="https://simg.open-open.com/show/c7459c80c59ca2342602413f57762bc6.jpg"></p> <p style="text-align:center"><img src="https://simg.open-open.com/show/ac5def094ae88d43cc5ecfdda8d08b75.jpg"></p> <p>确定是下是最新的，例如确定是0.34.1而不是0.20.1，如果出现请检查</p> <pre> <code class="language-java">maven { `url "$rootDir/../node_modules/react-native/android"`//地址是否正确 } 修改url "$rootDir*/..*/node_modules/react-native/android"为url "$rootDir/node_modules/react-native/android" </code></pre> <p><strong>添加native code</strong></p> <p>官方给出的</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/10e0da9a9181137a7dd84cd19aa3cad1.jpg"></p> <p>到时最新版本中提供了更加简单的方式，没错就是继承。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/a17194c7983a313afb560837534d9a03.jpg"></p> <p>在这里我们也需要自定义一个Application否则 运行时会报错，不信的小伙伴可以试一试</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/4cda9f247c3cc73fad53e455c5c3d464.jpg"></p> <p style="text-align:center"><img src="https://simg.open-open.com/show/87f19f31d40898b6af07560f437b105b.jpg"></p> <p>到此为止，ReactNative 集成到已有项目中完成!!!迫不及待的运行试试吧!!</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/c6a5f90b1871c56f3bcd905a9693d03a.jpg"></p> <p>在Terminal中运行 npm start，看到下图表示启动成功</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/fed6c48fe54ef060e5a630d0a1e65595.jpg"></p> <p>运行以后发现如下错误</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/3cbcff7e354e3b96535c9763fe842c6b.jpg"></p> <p>react-native报错：Could not get BatchedBridge, make sure your bundle is packaged correctly</p> <p>莫紧张，这是因为bundle没有打包好。找不到编译打包后的js文件。其实就是android studio默认的寻找js文件地址和react-native自己的工具编译所使用的地址不同。</p> <p><strong>解决方法</strong></p> <p><strong>方法一</strong></p> <p>进入项目，在android/app/src/main下新建assets目录。执行以下命令</p> <pre> <code class="language-java">$> react-native start > /dev/null 2>&1 & $> curl "http://localhost:8081/index.android.bundle?platform=android" -o > "app/src/main/assets/index.android.bundle" </code></pre> <p>在项目根目录下执行</p> <pre> <code class="language-java"><!--$> (cd android/ && ./gradlew assembleDebug)-->$> (cd 项目名称/ && ./gradlew assembleDebug) </code></pre> <p>把创建的apk安装到android设备</p> <p><strong>方法二</strong></p> <p>进入项目，在android/app/src/main下新建assets目录</p> <p>启动服务器</p> <pre> <code class="language-java">$>react-native start $>react-native bundle --platform android --dev false --entry-file index.android.js --bundl </code></pre> <p>在assets文件夹下会生成index.android.bundle文件，把创建的apk文件安装到android设备</p> <p><strong>方法三</strong></p> <p>进入项目，在android/app/src/main下新建assets目录</p> <p>在package.json中配置下面代码</p> <pre> <code class="language-java">"scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "bundle-android": "react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --sourcemap-output app/src/main/assets/index.android.map --assets-dest android/app/src/main/res/" }, </code></pre> <p>个人推荐使用方法三,方法三解决不了推荐方法二 手动执行</p> <p>修改刚刚的package.json文件</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/c015717ad5a79ddbbc9078168676fbb7.jpg"></p> <p>如果真机(模拟器)需要执行</p> <pre> <code class="language-java">adb reverse tcp:8081 tcp:8081 </code></pre> <p>一定要确定连接网络哦!!</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/de979cae6ad5b04e188986f8db26f7b7.jpg"></p> <p style="text-align:center"><img src="https://simg.open-open.com/show/8f8c8dadead4ca9e574e08b1340440b7.jpg"></p> <p>开心的进行开发吧!</p> <p>其他可能遇到的问题</p> <p>ReactNative兼容64位Android手机</p> <p>libgnustl_shared.so" is 32-bit instead of 64-bit类似错误</p> <p>解决方法</p> <ol> <li>在项目的根目录的 gradle.properties 里面添加一行android.useDeprecatedNdk=true.</li> <li>在 build.gradle 文件里添加以下代码</li> </ol> <pre> <code class="language-java"> android { ... defaultConfig { ... ndk { abiFilters "armeabi-v7a", "x86" } packagingOptions { exclude "lib/arm64-v8abrealm-jni.so" } } } </code></pre> <p>Genymotion模拟器运行显示没有连接到developement server如下图</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/12791b5129586107384568d312c7e3ba.jpg"></p> <p><strong>先检查是否连接到网络</strong></p> <p>点击模拟器中Menu菜单弹出下面图片，点击Dev Settings</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/ea2bab5768c4a33f10b9c2040741ec5a.jpg"></p> <p>4.点击Debugging 下面的Debug Server host & port for device填写地址和端口</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/111dfb2ff1a6fbe10f0ddb4dbf147292.jpg"></p> <p style="text-align:center"><img src="https://simg.open-open.com/show/f36a0b2fe05fdcc752a657d6433d8cbe.jpg"></p> <p> </p> <p>来自：http://mobile.51cto.com/android-525817.htm</p> <p> </p>