四川盐亭网站制作公司

Android原生APP中如何添加ReactNative进行混合开发

这篇文章主要为大家展示了“Android原生APP中如何添加ReactNative进行混合开发”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Android原生APP中如何添加ReactNative进行混合开发”这篇文章吧。

成都创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站设计制作、成都网站制作、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的瀍河网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

集成步骤

参考官方文档->react native 文档

本文使用开发环境 Android studio

注意***的React Native支持的***的SDK为16(android4.1)

npm环境，小伙伴们自己安装 nodeJS自己安装，可以参考官方文档安装环境，有问题可以发411437734@qq.com沟通

创建Android项目(已有项目跳过)

1.打开Android studio  

Android原生APP中如何添加ReactNative进行混合开发

2.输入项目名称，选择项目目录，点击next  

Android原生APP中如何添加ReactNative进行混合开发   

Android原生APP中如何添加ReactNative进行混合开发   

Android原生APP中如何添加ReactNative进行混合开发   

Android原生APP中如何添加ReactNative进行混合开发

至此项目创建完成(需要注意的是***的React Native支持***SDK版本为16 android4.1)

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

参考Facebook react native文档

1.进入项目根目录，添加JS到项目中-点击Android studio中的Terminal(如下图)  

Android原生APP中如何添加ReactNative进行混合开发

分别执行一下语句

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  下载.flowconfig文件

参考图片  

Android原生APP中如何添加ReactNative进行混合开发

查看项目中有node_modules，说明react和react native 安装完成  

Android原生APP中如何添加ReactNative进行混合开发

在项目根目录添加.flowconfig

参考下图  

Android原生APP中如何添加ReactNative进行混合开发

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

Android原生APP中如何添加ReactNative进行混合开发

ReactNativeAppDemo配置相关内容

1.添加"start": "node node_modules/react-native/local-cli/cli.js start"  到package.json 文件下 scripts标签 修改前  

Android原生APP中如何添加ReactNative进行混合开发

修改后  

Android原生APP中如何添加ReactNative进行混合开发

2.添加index.android.js文件到项目中  

Android原生APP中如何添加ReactNative进行混合开发 

'use strict'; import React from 'react'; import {   AppRegistry,   StyleSheet,   Text,   View } from 'react-native'; class HelloWorld extends React.Component {   render() {     return (                Hello, World            )   } } var styles = StyleSheet.create({   container: {     flex: 1,     justifyContent: 'center',   },   hello: {     fontSize: 20,     textAlign: 'center',     margin: 10,   }, }); AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

至此React native配置基本完成

3.App build.gradle配置

dependencies { ... compile "com.facebook.react:react-native:+" // From node_modules.}

这里注意不要使用maven中的，因为我们使用的是我们本地node_modules中的，注意***版本中支持的是23，appcompat-v7:23.0.1，暂时没有试24的api  

Android原生APP中如何添加ReactNative进行混合开发

整个工程build.gradle配置

allprojects { repositories {     ...     maven {         // All of React Native (JS, Android binaries) is installed from npm         url "$rootDir/node_modules/react-native/android"     } } ... }

Android原生APP中如何添加ReactNative进行混合开发

添加到AndroidManifest.xml:

确定External Libraries  

Android原生APP中如何添加ReactNative进行混合开发   

Android原生APP中如何添加ReactNative进行混合开发

确定是下是***的，例如确定是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

官方给出的  

Android原生APP中如何添加ReactNative进行混合开发

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

Android原生APP中如何添加ReactNative进行混合开发

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

Android原生APP中如何添加ReactNative进行混合开发   

Android原生APP中如何添加ReactNative进行混合开发

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

Android原生APP中如何添加ReactNative进行混合开发

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

Android原生APP中如何添加ReactNative进行混合开发

运行以后发现如下错误  

Android原生APP中如何添加ReactNative进行混合开发

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 --bundl

在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文件 

Android原生APP中如何添加ReactNative进行混合开发

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

adb reverse tcp:8081 tcp:8081

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

Android原生APP中如何添加ReactNative进行混合开发 

Android原生APP中如何添加ReactNative进行混合开发

开心的进行开发吧!

其他可能遇到的问题

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-v8abrealm-jni.so"    } } }

Genymotion模拟器运行显示没有连接到developement server如下图

Android原生APP中如何添加ReactNative进行混合开发

先检查是否连接到网络

点击模拟器中Menu菜单弹出下面图片，点击Dev Settings

Android原生APP中如何添加ReactNative进行混合开发

4.点击Debugging 下面的Debug Server host & port for device填写地址和端口

Android原生APP中如何添加ReactNative进行混合开发

Android原生APP中如何添加ReactNative进行混合开发

以上是“Android原生APP中如何添加ReactNative进行混合开发”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！


当前名称：Android原生APP中如何添加ReactNative进行混合开发
转载来于：http://scyanting.com/article/ipesds.html

其他资讯