史上最详细的Android原生APP中添加ReactNative进行混合开发教程

简介:

背景

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

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

集成步骤

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

本文使用开发环境 Android studio

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

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

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

1.打开Android studio  

打开Android studio

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

输入项目名称   

选择项目目录,点击next   

   

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

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

参考Facebook react native文档

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

进入项目根目录,添加JS到项目中-点击Android studio中的Terminal

分别执行一下语句


  
  
  1. npm init 
  2. npm install --save react react-native 
  3. 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文件

参考图片  

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

查看项目中有node_modules

在项目根目录添加.flowconfig

参考下图  

在项目根目录添加.flowconfig

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

ReactNativeAppDemo配置相关内容

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

修改后  

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

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


  
  
  1. 'use strict'; import React from 'react'; import { 
  2.   AppRegistry, 
  3.   StyleSheet, 
  4.   Text, 
  5.   View 
  6. from 'react-native'; class HelloWorld extends React.Component { 
  7.   render() {     return (       <View style={styles.container}> 
  8.         <Text style={styles.hello}>Hello, World</Text> 
  9.       </View
  10.     ) 
  11.   } 
  12. } var styles = StyleSheet.create({ 
  13.   container: { 
  14.     flex: 1, 
  15.     justifyContent: 'center'
  16.   }, 
  17.   hello: { 
  18.     fontSize: 20, 
  19.     textAlign: 'center'
  20.     margin: 10, 
  21.   }, 
  22. }); 
  23. AppRegistry.registerComponent('HelloWorld', () => HelloWorld);  

至此React native配置基本完成

3.App build.gradle配置


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

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

整个工程build.gradle配置


  
  
  1. allprojects { 
  2. repositories { 
  3.     ... 
  4.     maven {         // All of React Native (JS, Android binaries) is installed from npm 
  5.         url "$rootDir/node_modules/react-native/android" 
  6.     } 
  7. ... 
  8.    

添加<uses-permission android:name="android.permission.INTERNET" />到AndroidManifest.xml:

确定External Libraries  

   

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


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

添加native code

官方给出的  

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

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

   

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

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

运行以后发现如下错误  

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目录。执行以下命令


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

在项目根目录下执行


  
  
  1. <!--$> (cd android/ && ./gradlew assembleDebug)-->$> (cd 项目名称/ && ./gradlew assembleDebug) 

把创建的apk安装到android设备

方法二

进入项目,在android/app/src/main下新建assets目录

启动服务器


  
  
  1. $>react-native start 
  2. $>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中配置下面代码


  
  
  1. "scripts": { 
  2.     "start""node node_modules/react-native/local-cli/cli.js start"
  3.     "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/" 
  4.   }, 

个人推荐使用方法三,方法三解决不了推荐方法二 手动执行

修改刚刚的package.json文件 

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


  
  
  1. adb reverse tcp:8081 tcp:8081 

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

 

开心的进行开发吧!

其他可能遇到的问题

ReactNative兼容64位Android手机

libgnustl_shared.so" is 32-bit instead of 64-bit类似错误

解决方法

  1. 在项目的根目录的 gradle.properties 里面添加一行android.useDeprecatedNdk=true.
  2. 在 build.gradle 文件里添加以下代码

  
  
  1.  android { 
  2. ... 
  3. defaultConfig { 
  4.    ... 
  5.    ndk { 
  6.        abiFilters "armeabi-v7a""x86" 
  7.    } 
  8.  
  9.    packagingOptions { 
  10.        exclude "lib/arm64-v8abrealm-jni.so" 
  11.    } 
  12. }   

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

先检查是否连接到网络

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

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





作者:天空oo7
来源:51CTO
目录
相关文章
|
16天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
247 7
|
16天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
335 1
|
2天前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
16天前
|
JavaScript 前端开发 UED
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
42 9
|
20天前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
113 1
|
21天前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
330 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
8天前
|
NoSQL PHP Redis
布谷语音app源码服务器环境配置及技术开发语言
布谷语音app源码服务器环境配置及技术语言研发。。
|
16天前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
184 0
|
20天前
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
276 0
|
24天前
|
机器学习/深度学习 搜索推荐 数据挖掘
北邮移动互联网应用大作业实验报告《云账本app》开发
北邮移动互联网应用大作业实验报告《云账本app》开发
33 0