android ReactNative混合开发之最新教程

我就是我 2021-09-14 00:24 460阅读 0赞

# 前言：[React][] Native出来已经一段时间了，相对来说也算稳定了，在很多的企业中都实际使用他们，混合开发已经是未来的一种趋势，混合开发中使用的技术很多，不外乎[HTML5][]、[js][]框架通过一定的技术和原始交互，目前主流混合开发[react][React] Native、Cordova、APICloud、MUI、AppCan、Sencha Touch、[jQuery][] Mobile等等（其他的小伙伴们自己收集），目前网上写教程的人很多，但是[React Native][]更新速度很快，根据他们的教程，中间会遇到各种问题，今天我和大家一起踩踩各种坑，让小伙伴们快速集成到自己的APP中。 #

## 集成的小伙伴一定要注意图片中标注和备注哦，不然有可能会走弯路哦 ##

> 参考官方文档->[react native 文档][react native]  
> 本文使用开发环境 [Android][] studio  
> 注意最新的[react native][React Native]支持的最新的SDK为16（android4.1）

### 创建Android项目（已有项目跳过） ###

1.  打开Android studio  
    
    
    ![1240][]  
    
    
      
    
2.  输入项目名称，选择项目目录，点击next  
    
    
    ![1240 1][]  
    
    
      
    
    
    ![1240 2][]  
    
    
      
    
    
    ![1240 3][]  
    
    
      
    
    
      
    
    
    ![1240 4][]

至此项目创建完成（需要注意的是最新的React Native支持最新SDK版本为16 android4.1）

### React Native集成到上面我们创建的ReactNativeAPPDemo中 ###

参考Facebook react native文档

1.  进入项目根目录，添加JS到项目中-点击Android studio中的Terminal（如下图）
    
    ![1240 5][]

分别执行一下语句

npm init npm install --save react react-native curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

init 主要根据提醒生成package.json文件  
install --save react react-native 安装React 和React Native  
curl -o .flowconfig [https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig][https_raw.githubusercontent.com_facebook_react-native_master_.flowconfig] 下载.flowconfig文件  
参考图片

![1240 6][]

### 查看项目中有node\_modules，说明react和react native 安装完成 ###

![1240 7][]

### 在项目根目录添加.flowconfig ###

参考下图

![1240 8][]

也可以手动创建在浏览器打开[https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig网址复制内容创建文件][https_raw.githubusercontent.com_facebook_react-native_master_.flowconfig 1]

![1240 9][]

### ReactNativeAppDemo配置相关内容 ###

1.  添加"start": "node node\_modules/react-native/local-cli/cli.js start" 到`package.json` 文件下 `scripts`标签 修改前  
    
    
    ![1240 10][]  
    
    
      
    修改后  
    
    
    ![1240 11][]

1.  添加index.[android][Android].js文件到项目中  
    
    
    ![1240 12][]  
    
    
      
    
    
    >     '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);
    > 
    > 至此React native配置基本完成
2.  App `build.gradle`配置
    
    >     dependencies {
    >      ...
    >      compile "com.facebook.react:react-native:+" // From node_modules.
    >     }
    > 
    > 这里注意不要使用maven中的，因为我们使用的是我们本地node\_modules中的，**注意最新版本中支持的是23，appcompat-v7:23.0.1**，暂时没有试24的api  
    > 
    > 
    > ![1240 13][]  
    > 
    > 
    >   
    >

1.  整个工程`build.gradle`配置  
    >
    
        allprojects {
         repositories {
             ...
             maven {
                 // All of React Native (JS, Android binaries) is installed from npm
                 url "$rootDir/node_modules/react-native/android"
             }
         }
         ...
        }

![1240 14][]

14752256546683.jpg

1.  添加`<uses-permission android:name="android.permission.INTERNET" />`到`AndroidManifest.xml:`
2.  确定External Libraries  
    
    
    ![1240 15][]  
    
    
    14752240537114.jpg
    
      
    
    
    ![1240 16][]  
    
    
    14752241070972.jpg

确定是下是最新的，例如确定是0.34.1而不是0.20.1，如果出现请检查

maven {
                `url "$rootDir/../node_modules/react-native/android"`//地址是否正确
            } 
     修改url "$rootDir*/..*/node_modules/react-native/android"为url "$rootDir/node_modules/react-native/android"

### 添加native code ###

官方给出的

![1240 17][]

14752232872479.jpg

到时最新版本中提供了更加简单的方式，没错就是继承。

![1240 18][]

14752258065933.jpg

在这里我们也需要自定义一个Application否则 运行时会报错，不信的小伙伴可以试一试

![1240 19][]

14752259787709.jpg

![1240 20][]

14752260351714.jpg

到此为止，ReactNative 集成到已有项目中完成！！！迫不及待的运行试试吧！！

![1240 21][]

14752261248709.jpg

在Terminal中运行 npm start，看到下图表示启动成功

![1240 22][]

14752261852021.jpg

运行以后发现如下错误

![1240 23][]

14752468221176.jpg

react-native报错：Could not get BatchedBridge, make sure your bundle is packaged correctly  
莫紧张，这是因为bundle没有打包好。找不到编译打包后的js文件。其实就是android studio默认的寻找js文件地址和react-native自己的工具编译所使用的地址不同。

##### 解决方法 #####

###### 方法一 ######

进入项目，在android/app/src/main下新建assets目录。执行以下命令

$> react-native start > /dev/null 2>&1 &  
    $> curl "http://localhost:8081/index.android.bundle?platform=android" -o
    > "app/src/main/assets/index.android.bundle"

在项目根目录下执行

$> (cd 项目名称/ && ./gradlew assembleDebug)

把创建的apk安装到android设备

###### 方法二 ######

进入项目，在android/app/src/main下新建assets目录  
启动服务器

$>react-native start
    $>react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res/

在assets文件夹下会生成index.android.bundle文件，把创建的apk文件安装到android设备

###### 方法三 ######

进入项目，在android/app/src/main下新建assets目录  
在package.json中配置下面代码

"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/"
      },

个人推荐使用方法三,方法三解决不了推荐方法二 手动执行  
修改刚刚的package.json文件

![1240 24][]

如果真机(模拟器)需要执行

adb reverse tcp:8081 tcp:8081

一定要确定连接网络哦！！

![1240 25][]

![1240 26][]

开心的进行开发吧！

### 其他可能遇到的问题 ###

###### ReactNative兼容64位Android手机 ######

libgnustl\_shared.so" is 32-bit instead of 64-bit类似错误

###### 解决方法 ######

1.  在项目的根目录的 `gradle.properties` 里面添加一行代码  
    `android.useDeprecatedNdk=true.`
2.  在 `build.gradle` 文件里添加以下代码
    
        android {
        ...
        defaultConfig {
           ...
           ndk {
               abiFilters "armeabi-v7a", "x86"
           }
        
           packagingOptions {
               exclude "lib/arm64-v8a/librealm-jni.so"
           }
        }
        }
    
    最后感谢
    
    >     http://majing.io/questions/589
    >     http://www.cnblogs.com/tony-yang-flutter/p/5864578.html
    >     https://blog.yourtion.com/update-react-native-029-bug.html
    >     http://stackoverflow.com/questions/38870710/error-could-not-get-batchedbridge-make-sure-your-bundle-is-packaged-properly/38874952
    >     http://blog.csdn.net/b992379702b/article/details/52234479
    
    ###### Genymotion模拟器运行显示没有连接到developement server如下图 ######

![1240 27][]

1.  先检查是否连接到网络
2.  点击模拟器中Menu菜单弹出下面图片，点击Dev Settings  
    
    
    ![1240 28][]  
    
    
      
    
3.  点击Debugging 下面的`Debug Server host & port for device`填写地址和端口  
    
    
    ![1240 29][]  
    
    
      
    
    
      
    
    
    ![1240 30][]

> 上文中使用到的项目ReactNativeAPPDemo链接: [https://pan.baidu.com/s/1i4GkeKt][https_pan.baidu.com_s_1i4GkeKt] 密码: vwym

最近小伙伴反馈0.39.0上面没有ReactApplication接口，请看我的截图有问题QQ联系我共同探讨

> 我的项目中依然可以看到，是不是有的小伙伴gradle文件配置的问题，仔细检查下，确实有问题的小伙伴，请加QQ私聊  
> 
> 
> ![1240 31][]  
> 
> 
>   
>

###### 升级ReactNative ######

> 由于ReactNative 更新比较频繁，有的时候我们的项目需求根据情况，需要升级到最新或者指定版本的ReactNative，下面给大家介绍下。

1.  安装git（如果安装git请求跳过）
    
    > 下载并安装[git][]
2.  在命令行执行命令
    
    > npm install -g react-native-[Git][]\-upgrade  
    > react-native-[git][Git]\-upgrade
3.  更新项目ReactNative依赖
    
    > 通过命令：npm info react-native 查看ReactNative版本  
    > npm install --save react-native@X.Y 安装指定版本，X.Y是npm info react-native 查看到的ReactNative版本
4.  更新 react-native upgrade

[React]: http://lib.csdn.net/base/react
[HTML5]: http://lib.csdn.net/base/html5
[js]: http://lib.csdn.net/base/javascript
[jQuery]: http://lib.csdn.net/base/jquery
[React Native]: http://lib.csdn.net/base/reactnative
[react native]: http://facebook.github.io/react-native/releases/next/docs/integration-with-existing-apps.html
[Android]: http://lib.csdn.net/base/android
[1240]: /images/20210802/afdd5901bc814e8684f2cd9f16627249.png
[1240 1]: /images/20210802/e8fd5ff820644ae79adf05f7275d37c0.png
[1240 2]: /images/20210802/ae1b91c9a1ce495c8765c70d2f04ebc1.png
[1240 3]: /images/20210802/5b940a0a8cb74e9883ca334e7d5d0e20.png
[1240 4]: /images/20210802/783c2d8937af4659be3f8ab3dc2eba65.png
[1240 5]: /images/20210802/a36de7eb2bf742ed943974c7e52c4fc9.png
[https_raw.githubusercontent.com_facebook_react-native_master_.flowconfig]: https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
[1240 6]: /images/20210802/2dbd34949b81462bbf3dea072cd32644.png
[1240 7]: /images/20210802/d93cb1e49571403d96a55d15c617ac89.png
[1240 8]: /images/20210802/747c949d7063454f927c2a8f9f7c1c90.png
[https_raw.githubusercontent.com_facebook_react-native_master_.flowconfig 1]: https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig%E7%BD%91%E5%9D%80%E5%A4%8D%E5%88%B6%E5%86%85%E5%AE%B9%E5%88%9B%E5%BB%BA%E6%96%87%E4%BB%B6
[1240 9]: /images/20210802/e21a5ad4f0da41719fa664761d2039f3.png
[1240 10]: /images/20210802/2f2b1fca47664b6496e092c2218ecfdc.png
[1240 11]: /images/20210802/9b97ed90243a4f68895fdf893653c7c4.png
[1240 12]: /images/20210802/97f0b659ceaf48ec99e93fb460aa796c.png
[1240 13]: /images/20210802/28ce979885cb426f959f6e431072ed90.png
[1240 14]: /images/20210802/37aaf377ba924b4c899fd20339f09426.png
[1240 15]: /images/20210802/63b277abc483447c9b46b7163e5768eb.png
[1240 16]: /images/20210802/e1a77d6c6a1b442a9d193e3cf8335762.png
[1240 17]: /images/20210802/f61fb1ecaa3b4bffb0018dd544c87c90.png
[1240 18]: /images/20210802/e56b6c29fa494602885ca7dac017ada7.png
[1240 19]: /images/20210802/dbe1b60662ac402e9ecd8fe3b938fba5.png
[1240 20]: /images/20210802/1153e9107d514f2fa6a0063ab6eed333.png
[1240 21]: /images/20210802/c2dadd1d578441f2a2d4798583cefa47.png
[1240 22]: /images/20210802/f6fc064f98924c30a38e940741f8734b.png
[1240 23]: /images/20210802/c825790e28134503b9c774da5bcf6921.png
[1240 24]: /images/20210802/b9c898af9f9d42bca01a4c15a6ed215c.png
[1240 25]: /images/20210802/63d47a2777b847c593b59adf04e63910.png
[1240 26]: /images/20210802/76fd60e6bf684bbfbff2101fa24f3883.png
[1240 27]: /images/20210802/3d98a2bb41f040f4b001adcb959e7331.png
[1240 28]: /images/20210802/aa0574683f914f098c7e8fb2d8bf4d73.png
[1240 29]: /images/20210802/24646d8aa2f941298446ca4db1d0fb4d.png
[1240 30]: /images/20210802/158829183c02436095404d7e77e41de1.png
[https_pan.baidu.com_s_1i4GkeKt]: https://pan.baidu.com/s/1i4GkeKt
[1240 31]: /images/20210802/45064c24a4f54b6aba6846d5743a0d47.png
[git]: https://git-scm.com/downloads
[Git]: http://lib.csdn.net/base/git