React Native和Android整合详解

前言

按照React Native的迭代速度，使用官网的文档，已经不能很顺利的实现React Native和Android的有效整合。React Native最新版本 已经是0.39。为了更好的讲解React Native和Android的整合我这里列出我本地的环境：

  • Android Stuidio 2.2稳定版
  • 64位win7操作系统
  • 红米note3双网通普配版
  • React Native 0.39

具体实践

创建项目

这一步按照AS新建项目向导一步步完成即可，完成后。

  • 在app module下的build.gradle文件的dependencies中添加React Native 依赖：compile 
    “com.facebook.react:react-native:+”
  • 修改Manifest文件：
<uses-permission android:name="android.permission.INTERNET" />
<application ...>
<activity    android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4

注：compile SDK 和target SDK都是24（网上有文章讲，使用的appcompat-v7支持包版本必须是23.0.1，compile SDK和target SDK也必须是23 。不过最新的也支持的）

compile 'com.android.support:appcompat-v7:24.2.1'
  • 1
  • 1

如果你出现下面的错误，可以降低版本到23.

Caused by: java.lang.IllegalAccessError: Method 'void
android.support.v4.net.ConnectivityManagerCompat.<init>()'
is inaccessible to class
'com.facebook.react.modules.netinfo.NetInfoModule'
(declaration of 'com.facebook.react.modules.netinfo.NetInfoModule'
appears in /data/app/com.milter.www.awesomeproject2-2/base.apk)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

将Android项目变成React Native项目

其实整合的过程就是将一个原生的Android项目，转换为满足React Native结构格式的项目React Native项目结构。

  • 创建并修改package.json文件 
    进入Android项目的根目录，使用命令：
npm init
  • 1
  • 1

这个命令会引导你在ReactNativeWithNativeApp目录下创建一个package.json文件。如图所示： 

接下来我们对package.json文件进行修改，修改部分如下：

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

修改为：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
 ,"start": "node node_modules/react-native/local-cli/cli.js start"
}
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4

修改后，我们在项目根目录的命令行窗口中输入命令：

npm start
  • 1
  • 1

就相当于执行如下命令：

node node_modules/react-native/local-cli/cli.js start
  • 1
  • 1

随着package.json文件的创建，我们的项目也变成了一个Node项目。

引入React Native 模块

在项目根目录下输入如下的命令：

npm install --save react react-native
  • 1
  • 1

执行完后我们发现项目多了一个node_modules文件，react native依赖的库都会在这里看到。

  • 创建.flowconfig文件
curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
  • 1
  • 1

这一命令的作用是将命令中url指向的.flowconfig文件下载到项目的根目录。在上面的图packagejson中可以看到这个下载后的文件。关于curl的讲解请看curl详解 
注：如果你不想使用curl命令，你可以可以https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig拷贝里的内容存为.flowconfig文件。

创建RN程序

在根目录下创建index.android.js文件，如果你是直接用react-native init demo（项目名），也可以拷贝index.android.js，具体代码如下：

'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);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

将React Native程序整合进Android项目

在项目根目录的build.gradle中(注意：不是app模块中的build.gradle文件)添加依赖。

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

修改MainActivity内容，完整代码如下：

public class MainActivity extends AppCompatActivity
      implements DefaultHardwareBackBtnHandler {

  private ReactRootView mReactRootView;
  private ReactInstanceManager mReactInstanceManager;
  private LifecycleState mLifecycleState
          = LifecycleState.BEFORE_RESUME;

  @Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
    /* 下面的版本判断代码官方文档中没有，
      如果不添加，在6.0以上的Android版本中会报错 */
      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
          if (!Settings.canDrawOverlays(this)) {
              Intent serviceIntent = new Intent(
                      Settings.ACTION_MANAGE_OVERLAY_PERMISSION);
              startActivity(serviceIntent);
          }
      }
      mReactRootView = new ReactRootView(this);
      mReactInstanceManager = ReactInstanceManager.builder()
              .setApplication(getApplication())
              .setBundleAssetName("index.android.bundle")
              .setJSMainModuleName("index.android")
              .addPackage(new MainReactPackage())
              .setUseDeveloperSupport(BuildConfig.DEBUG)
              .setInitialLifecycleState(mLifecycleState)
              .build();
//下面代码中的"HelloWorld"来自index.android.js文件中最后一行代码
      mReactRootView.startReactApplication(mReactInstanceManager,
              "HelloWorld", null);

      setContentView(mReactRootView);
  }

  @Override
  protected void onPause() {
      super.onPause();

      mLifecycleState = LifecycleState.BEFORE_RESUME;

      if (mReactInstanceManager != null) {
          mReactInstanceManager.onHostPause();
      }
  }

  @Override
  protected void onResume() {
      super.onResume();

      mLifecycleState = LifecycleState.RESUMED;

      if (mReactInstanceManager != null) {
          mReactInstanceManager.onHostResume(this, this);
      }
  }

  @Override
  protected void onDestroy() {
      super.onDestroy();

      mReactRootView.unmountReactApplication();
      mReactRootView = null;

      if (mReactInstanceManager != null) {
          mReactInstanceManager.destroy();
      }
  }

  @Override
  public void onActivityResult(int requestCode, int resultCode,
                               Intent data) {
      if (mReactInstanceManager != null) {
          mReactInstanceManager.onActivityResult(this,requestCode,
                  resultCode, data);
      }
  }

  @Override
  public void onBackPressed() {
      if (mReactInstanceManager != null) {
          mReactInstanceManager.onBackPressed();
      }
      else {
          super.onBackPressed();
      }
  }

  @Override
  public void invokeDefaultOnBackPressed() {
      super.onBackPressed();
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94

运行配置

使用npm start命令运行项目，然后使用

react-native run-android
  • 1
  • 1

如果报错，请往下看。如果出现如下错误：

java.lang.UnsatisfiedLinkError: could find DSO to load: libreactnativejni.so
  • 1
  • 1

这个错误的原因是React Native提供的libreactnativejni.so文件是32位，而我们的项目中用了一些不兼容的64位so文件，二者混在一起产生的。解决的办法就是禁止使用那些64位的so文件。 
第一，在项目根目录下的gradle.properties文件最后加上这样一句：

android.useDeprecatedNdk=true
  • 1
  • 1

第二、在app module下的build.gradle文件中添加如下内容：

android {
    ...
    defaultConfig {
        ...
        ndk{
            abiFilters "armeabi-v7a", "x86"
        }
        ...
    }
...
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

第三、找出不兼容的64位so文件并禁止它们 
在目录…\ReactNativeWithNativeApp\app\build\outputs\apk下找到app-debug.apk，并把它解压，查看一下，解压后的文件的lib目录下有没有这个目录： 
arm64-v8a 
如果有这个目录，看看里面的so文件，都是我们要禁止的，禁止的方法如下：假设里面有一个 1.so文件，我们要在app module下的build.gradle文件中做如下修改：

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

好了，整合就说完了，请大家持续关注哦，现在出项目实战了

时间： 2024-10-02 16:09:03

React Native和Android整合详解的相关文章

Android 混淆详解

Android 混淆详解 转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/69388246 本文出自[赵彦军的博客] 混淆的基本概念 什么是混淆? 代码混淆亦称花指令,是将计算机程序的代码,转换成一种功能上等价,但是难于阅读和理解的形式的行为. 混淆的目的 1.混淆的目的是为了加大反编译的成本,但是并不能彻底防止反编译. 2.压缩apk 资源文件 开启混淆 一般我们做项目的时候,都是分为 release 和 debug 版本,re

React native for Android 初步实践

Facebook 于2015年9月15日推出react native for Android 版本, 加上2014年底已经开源的IOS版本,至此RN (react-native)真正成为跨平台的客户端框架.本篇主要是从分析代码入手,探讨一下RN在安卓平台上是如何构建一套JS的运行框架. 一. 整体架构 RN 这套框架让 JS开发者可以大部分使用JS代码就可以构建一个跨平台APP. Facebook官方说法是learn once, run everywhere, 即在Android . IOS.

Android Menu详解及示例代码_Android

Android Menu 详细介绍: 1.选项菜单 OptionsMenu 2.上下文菜单 ContextMenu 3.子菜单 SubMenu 组成Android用户界面的除了View以外,还有菜单和对话框,这一讲我们就共同学习一下菜单的使用. 菜单是用户界面中最常见的元素,使用也非常频繁,在Android中,菜单被分为如下三种,选项菜单(OptionsMenu).上下文菜单(ContextMenu)和子菜单(SubMenu),下面分别举例说明. 一.选项菜单 OptionsMenu Andro

Android签名详解（debug和release）

Android签名详解(debug和release) 1. 为什么要签名 1) 发送者的身份认证 由于开发商可能通过使用相同的Package Name来混淆替换已经安装的程序,以此保证签名不同的包不被替换 2) 保证信息传输的完整性 签名对于包中的每个文件进行处理,以此确保包中内容不被替换 3) 防止交易中的抵赖发生,Market对软件的要求 2. 签名的说明 1) 所有的应用程序都必须有数字证书,Android系统不会安装一个没有数字证书的应用程序 2) Android程序包使用的数字证书可以

使用OpenGL开发Android应用详解系列三

注:近三篇转载中的视锥体部分结合着来看,再参照老罗的3d变换,基本可以初步理解和完成相关视锥体调整. 使用OpenGL开发Android应用详解系列三 [原创]转载请注明出处 我一家网 http://www.5yijia.com 前面两节主要介绍了一下OpenGL的基本概念,以及在Android开发中引入OpenGL时,Android项目的基本构成情况.这一节开始,我们通过具体的实例,来进行简单3D图形的描画. 注:代码基础还是采用上一节: 使用OpenGL开发Android应用详解系列二中使用

Android CardView详解及使用方法和实例_Android

Android  CardView详解 Android5.0中向我们介绍了一个全新的控件–CardView,从本质上看,可以将CardView看做是FrameLayout在自身之上添加了圆角和阴影效果.请注意:CardView被包装为一种布局,并且经常在ListView和RecyclerView的Item布局中,作为一种容器使用. 发现个好看的东东 CardView,他在support v7包中~~ 顾名思义就是卡片view,可以设置阴影,圆角,等等.. 样子是这样的: 或者你还可以放到list

如何正确使用Android线程详解_Android

前言 对于移动开发者来说,"将耗时的任务放到子线程去执行,以保证UI线程的流畅性"是线程编程的第一金科玉律,但这条铁则往往也是UI线程不怎么流畅的主因.我们在督促自己更多的使用线程的同时,还需要时刻提醒自己怎么避免线程失控. 多线程编程之所以复杂原因之一在于其并行的特性,人脑的工作方式更符合单线程串行的特点.一个接着一个的处理任务是大脑最舒服的状态,频繁的在任务之间切换会产生"头痛"这类系统异常.人脑的多任务和计算机的多任务性能差异太大导致我们在设计并行的业务逻辑之

Android CoordinatorLayout详解及实例代码_Android

Android CoordinatorLayout详解 一.CoordinatorLayout有什么作用 CoordinatorLayout作为"super-powered FrameLayout"基本实现两个功能: 1.作为顶层布局 2.调度协调子布局 CoordinatorLayout使用新的思路通过协调调度子布局的形式实现触摸影响布局的形式产生动画效果.CoordinatorLayout通过设置子View的 Behaviors来调度子View.系统(Support V7)提供了A

Android RecyclerView详解之实现 ListView GridView瀑布流效果_Android

 什么是RecyclerView RecyclerView 是Google推出的最新的 替代ListView.GridView的组件,RecyclerView是用来显示大量数据的容器,并通过有限数量的子View,来提高滚动时的性能. 与ListView不同,RecyclerView 不再负责布局,而是专注于布局复用.布局主要通过 LayoutManager来管理,目前提供了3种常用的布局管理: LinearLayoutManager 线性布局管理器 (ListView效果) GridLayout