一箫一剑平生意,负尽狂名十五年。这篇文章主要讲述RN与现有的原生app集成相关的知识,希望能为你提供帮助。
https://facebook.github.io/react-native/docs/integration-with-existing-apps.html
RN可以很好地支持往一个原生的app上添加RN的组件。通过简单的步骤,我们可以添加RN基础的特征、组件等。后面以android为例。
关键思想
- 设置RN的依赖和结构目录
- 用JS开发RN组件
- 添加一个ReactRootView到android app上,这会作为RN组件的容器
- 开启RN服务器和运行原生app
- 检查RN组件是否正常工作
- 设置目录结构。把android项目复制到RN项目根目录下的android文件夹中(初始化的RN项目中就已经有这样一个文件夹了,里面有初始的android项目内容)
- 安装JS依赖。在RN项目创建一个package.json,内容如下(初始的RN项目也有这些内容了)
{ "name": "MyReactNativeApp", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start" } }
然后安装react和react-native依赖
npm install --save [email protected] react-native
把RN依赖添加到build.gradle中(如果想使用指定版本的RN,可以将+替换为npm中对应的RN版本号):
dependencies { compile ‘com.android.support:appcompat-v7:23.0.1‘ ... compile "com.facebook.react:react-native:+" // From node_modules. }
光光以上这么配置,gradle会(?)找不到这个依赖,需要在build.gradle中配置一个仓库告诉gradle去哪里找依赖(确保添加到allproject这个块中,而且要在所有其他maven仓库之上。同时确保下面的url是正确的):
allprojects { repositories { maven { // All of React Native (JS, Android binaries) is installed from npm url "$rootDir/../node_modules/react-native/android" } ... } ... }
配置权限
往AndroidManifest.xml清单文件中加上:
< uses-permission android:name="android.permission.INTERNET" />
如果需要在原生app中打开开发者菜单,也需要在清单文件中加上(如果要发布则把下面这行去掉):
< activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
代码集成
【RN与现有的原生app集成】
推荐阅读
- Android GridView去除自带边框点击效果去除右侧滚动条禁止上下滑动
- Android 解决通过自定义设置打开热点后手机搜索不到热点的问题。
- Android 自定义标题栏
- mybatis怎么自动生成实体类,Mapper配置文件和Dao接口
- 如何计算 App 的启动时间
- android 插件化框架 speed-tools
- pre-network android预加载网络框架
- PostgreSQL 9.6 同步多副本remote_apply记录
- 手机网页唤醒app