React-Native学习之嵌入Android原生项目
2017-07-12 17:55
459 查看
文章有点长,耐心看下去,希望能够帮助你
邮箱:Jack120612@163.com
关于React-Native(以下简称RN)的环境配置和搭建请参考官方教程http://reactnative.cn/
下面说一下如何创建一个混合项目和我在创建项目时碰到的一些问题
我就按照我自己操作的步骤一步步来
按照正常的步骤,我们开始初始化项目
用Terminal来实现,当然也可以用终端
有一些内容直接回车就是使用默认值,但是有一个位置需要数一下,main,就是入口,我是Android的所以创建的index.android.js(默认的就是index.js)
我们继续
我们开始执行npm install –save react react-native
note:在这个位置可能会比较慢,我们可以添加淘宝的镜像
npm config set registry https://registry.npm.taobao.org –global
npm config set disturl https://npm.taobao.org/dist –global
等待上面的运行结束
curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
运行结束之后我们会发现多了一个文件
关于为什么这样做,大家可以去百度一下,我就不再这里展开说了
上面的工作都做完的话就可以开始准备app上面的配置了
app配置
在project的级别的build.gradle->allprojects->repositories下添加
在这里说明一下,Android一般常规引用的都是jcenter内的库,里面包含的最高就是0.20.1
所以我们需要更换到对应的maven库来添加对应版本的rn
接下来我们需要进行dependencies下的引用
如果在配置的时候碰到了下面这个问题,我们可以添加相关引用就好了,在module级别的bulid.gradle->android节点下添加依赖
到这里我们的配置基本上就都完成了
现在我们在项目的根目录创建对应的文件了
创建完成之后我们随便写点内容吧
就来个最经典的吧
这样我们rn这边的东西就写完了
下面有两个地方需要注意一下
我们声明相关权限,第二个是悬浮窗体权限,关于悬浮窗权限我们需要手动来设置,高于6.0的Android需要添加以下代码
我们需要将原声的devSetiingsActivity进行相关的声明
相关的已经编写完了,我们来开启模拟器运行一下
运行到了这里,我们运行项目,发现报错了
dlopen failed: “/data/data/com.mockuai.rndemo/lib-main/libgnustl_shared.so” is 32-bit instead of 64-bit
我们需要对项目进行相关配置,很明显这是一个so库对应不上的问题,我们需要将64位库进行屏蔽,然后全部使用32位库
配置module级别下的build.gradle如下
再来一遍
你会发现你已经看到了你想要的界面
关于一些其他问题,我们需要注意的一些
- 模拟器无法连接到服务,我们需要设置adb reverse tcp:8081 tcp:8081来设置一下端口
- 我们在打包apk的时候需要注意将setUseDeveloperSupport(true)改为false,我们需要在src-main创建assets目录,然后运行下面的命令生成静态的bundle文件
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/
邮箱:Jack120612@163.com
关于React-Native(以下简称RN)的环境配置和搭建请参考官方教程http://reactnative.cn/
下面说一下如何创建一个混合项目和我在创建项目时碰到的一些问题
我就按照我自己操作的步骤一步步来
创建Android项目
最低的SDK版本是16,RN官方是支持SDK23关于项目的项目的配置
这是我的个人配置的按照正常的步骤,我们开始初始化项目
用Terminal来实现,当然也可以用终端
rn配置
npm init
我们需要手动输入一些信息有一些内容直接回车就是使用默认值,但是有一个位置需要数一下,main,就是入口,我是Android的所以创建的index.android.js(默认的就是index.js)
我们继续
我们开始执行npm install –save react react-native
note:在这个位置可能会比较慢,我们可以添加淘宝的镜像
npm config set registry https://registry.npm.taobao.org –global
npm config set disturl https://npm.taobao.org/dist –global
等待上面的运行结束
curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
运行结束之后我们会发现多了一个文件
关于为什么这样做,大家可以去百度一下,我就不再这里展开说了
上面的工作都做完的话就可以开始准备app上面的配置了
app配置
在project的级别的build.gradle->allprojects->repositories下添加
maven { //添加react native依赖,url路径根据实际的来写,本文的如下: url "$rootDir/node_modules/react-native/android" }
在这里说明一下,Android一般常规引用的都是jcenter内的库,里面包含的最高就是0.20.1
所以我们需要更换到对应的maven库来添加对应版本的rn
接下来我们需要进行dependencies下的引用
compile "com.facebook.react:react-native:+"
如果在配置的时候碰到了下面这个问题,我们可以添加相关引用就好了,在module级别的bulid.gradle->android节点下添加依赖
configurations.all { resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9' }
到这里我们的配置基本上就都完成了
项目编辑
rn编写
还记的上面说的main对应的index.android.js的入口么?现在我们在项目的根目录创建对应的文件了
创建完成之后我们随便写点内容吧
import React, { Component } from 'react'; import { AppRegistry, Text } from 'react-native'; class HelloWorldApp extends Component { render() { return ( <Text>Hello world!</Text> ); } } AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
就来个最经典的吧
这样我们rn这边的东西就写完了
Android编写
下面是官方给出的写法,所以我们在学基础的时候可以借鉴一下public class MyActivity extends Activity implements DefaultHardwareBackBtnHandler { private ReactRootView mRootView; private ReactInstanceManager mReactManager; @Override public void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); mRootView = new ReactRootView(this); mReactManager = ReactInstanceManager.builder() .setApplication(getApplication()) .setBundleAssetName("index.android.bundle")//启动加载的文件,可以用于打包生成apk .setJSMainModuleName("index.android")//启动入口 .addPackage(new MainReactPackage()) .setUseDeveloperSupport(true) //开发者模式的开关 .setInitialLifecycleState(LifecycleState.RESUMED) .build(); //HelloWorldApp这个名字要和刚刚创建的rn项目名一样 mRootView.startReactApplication(mReactManager, "HelloWorldApp", null); setContentView(mRootView); } @Override public void invokeDefaultOnBackPressed() { super.onBackPressed(); } @Override protected void onPause() { super.onPause(); if (mReactManager != null) { mReactManager.onHostPause(this); } } @Override protected void onResume() { super.onResume(); if (mReactManager != null) { mReactManager.onHostResume(this, this); } } @Override protected void onDestroy() { super.onDestroy(); if (mReactManager != null) { mReactManager.onHostDestroy(this); } } @Override public void onBackPressed() { if (mReactManager != null) { mReactManager.onBackPressed(); } else { super.onBackPressed(); } } @Override public boolean onKeyUp(int keyCode, KeyEvent event) { //当我们点击菜单的时候打开发者菜单,一个弹窗(此处需要悬浮窗权限才能显示) if (keyCode == KeyEvent.KEYCODE_MENU && mReactManager != null) { mReactManager.showDevOptionsDialog(); return true; } return super.onKeyUp(keyCode, event); } }
下面有两个地方需要注意一下
<uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
我们声明相关权限,第二个是悬浮窗体权限,关于悬浮窗权限我们需要手动来设置,高于6.0的Android需要添加以下代码
if (Build.VERSION.SDK_INT >= 23) { if(!Settings.canDrawOverlays(this)) { Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION); startActivity(intent); } }
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
我们需要将原声的devSetiingsActivity进行相关的声明
相关的已经编写完了,我们来开启模拟器运行一下
运行项目
我们用npm start或者react-native start来开启运行,我们来试一下运行到了这里,我们运行项目,发现报错了
dlopen failed: “/data/data/com.mockuai.rndemo/lib-main/libgnustl_shared.so” is 32-bit instead of 64-bit
我们需要对项目进行相关配置,很明显这是一个so库对应不上的问题,我们需要将64位库进行屏蔽,然后全部使用32位库
配置module级别下的build.gradle如下
defaultConfig{ ... ndk{ abiFilters "armeabi-v7a","x86" } } packagingOptions{ exclude "lib/arm64-v8a" }
再来一遍
你会发现你已经看到了你想要的界面
关于一些其他问题,我们需要注意的一些
- 模拟器无法连接到服务,我们需要设置adb reverse tcp:8081 tcp:8081来设置一下端口
- 我们在打包apk的时候需要注意将setUseDeveloperSupport(true)改为false,我们需要在src-main创建assets目录,然后运行下面的命令生成静态的bundle文件
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/
相关文章推荐
- React Native嵌入Android原生项目中(两种方法)
- React Native嵌入Android原生项目中
- react native 学习笔记----将react native嵌入到Android原生应用
- 如何把React Native嵌入到原生android应用中
- 【React Native开发】React Native移植原生Android项目(Mac用)
- Mac android原生工程中潜入react-native混合开发项目搭建
- android 原生项目集成react-native的坑
- (React-Native 学习之八) Rn混合开发之--Android原生代码 和 ReactNative 通信
- 原生Android项目中集成React native页面
- React Native 集成到 Android 原生项目中踩坑记录 (Didn't find class "com.facebook.jni.IteratorHelper")
- Android 原生应用嵌入React-Native模块开发-环境配置及填坑记
- Android原生嵌入React Native详解
- Android原生项目接入React Native
- android 原生app嵌入reactnative页面
- 在Android原生中嵌入React Native,进而React Native调用原生
- 在Android原生应用中嵌入ReactNative页面
- react native学习笔记25——Android原生模块的封装与调用
- 原生Android项目中集成react-native以及jpush-react-native(极光推送)
- 【React Native开发】React Native移植原生Android项目(4)
- React-native嵌入到原有Android项目