前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React Native和Android整合详解

React Native和Android整合详解

作者头像
xiangzhihong
发布2018-02-05 21:14:57
1.5K0
发布2018-02-05 21:14:57
举报
文章被收录于专栏:向治洪

前言

按照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文件:
代码语言:javascript
复制
<uses-permission android:name="android.permission.INTERNET" />
<application ...>
<activity    android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>

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

代码语言:javascript
复制
compile 'com.android.support:appcompat-v7:24.2.1'

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

代码语言:javascript
复制
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)

将Android项目变成React Native项目

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

  • 创建并修改package.json文件 进入Android项目的根目录,使用命令:
代码语言:javascript
复制
npm init

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

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

代码语言:javascript
复制
 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }

修改为:

代码语言:javascript
复制
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
 ,"start": "node node_modules/react-native/local-cli/cli.js start" 
}

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

代码语言:javascript
复制
npm start

就相当于执行如下命令:

代码语言:javascript
复制
node node_modules/react-native/local-cli/cli.js start

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

引入React Native 模块

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

代码语言:javascript
复制
npm install --save react react-native

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

  • 创建.flowconfig文件
代码语言:javascript
复制
curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

这一命令的作用是将命令中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,具体代码如下:

代码语言:javascript
复制
'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);

将React Native程序整合进Android项目

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

代码语言:javascript
复制
allprojects {
  repositories {
      jcenter()
     maven {
          // All of React Native (JS, Android binaries) is installed from npm
          url "$projectDir/../node_modules/react-native/android"
      }
  }

修改MainActivity内容,完整代码如下:

代码语言:javascript
复制
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();
  }
}

运行配置

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

代码语言:javascript
复制
react-native run-android

如果报错,请往下看。如果出现如下错误:

代码语言:javascript
复制
java.lang.UnsatisfiedLinkError: could find DSO to load: libreactnativejni.so

这个错误的原因是React Native提供的libreactnativejni.so文件是32位,而我们的项目中用了一些不兼容的64位so文件,二者混在一起产生的。解决的办法就是禁止使用那些64位的so文件。

第一,在项目根目录下的gradle.properties文件最后加上这样一句:

代码语言:javascript
复制
android.useDeprecatedNdk=true

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

代码语言:javascript
复制
android {
    ...
    defaultConfig {
        ...
        ndk{
            abiFilters "armeabi-v7a", "x86"
        }
        ...
    }
...
}

第三、找出不兼容的64位so文件并禁止它们

在目录…\ReactNativeWithNativeApp\app\build\outputs\apk下找到app-debug.apk,并把它解压,查看一下,解压后的文件的lib目录下有没有这个目录:

arm64-v8a

如果有这个目录,看看里面的so文件,都是我们要禁止的,禁止的方法如下:假设里面有一个 1.so文件,我们要在app module下的build.gradle文件中做如下修改:

代码语言:javascript
复制
android {
    ...
    defaultConfig {
        ...
        ndk{
            abiFilters "armeabi-v7a", "x86"
        }
        packagingOptions {
            exclude "lib/arm64-v8a/1.so"            
        }
        ...
    }
...
}

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-01-01 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 具体实践
    • 创建项目
      • 将Android项目变成React Native项目
        • 引入React Native 模块
        • 创建RN程序
        • 将React Native程序整合进Android项目
        • 运行配置
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档