Allen 专栏-移动互联网

ReactNative 2 标签

Android 项目中嵌入 ReactNative 模块

ReactNative的发展已经进入了很多开发者视野,作为一名原生开发者更是对 RN 充满了无限的好奇和期待,
本节将详细讲述如何将一个原生的 Android App 项目嵌入最新的 RN 模块

1. 准备开始

  1. 一个已有的 Android 原生项目
    1. 已经配置好的原生 Android 开发环境和 node.js已经 RN 环境
    2. 改造之后的流程图
      图片

2.开始改造

  1. 在原生 Android 项目的在app/build.gradle文件中,添加React Native依赖:
compile"com.facebook.react:react-native:+
  1. 加入.so 库
ndk {
    abiFilters "armeabi-v7a", "x86"
}   
  1. 在工程目录下找到工程的 build.gradle文件中,添加 maven依赖
allprojects {
    repositories {
        jcenter()
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/node_modules/react-native/android"
        }
    }
}
  1. 在 app 目录里添加需要的权限
 <uses-permission android:name="android.permission.INTERNET"/>
 /**设置调试 的权限**/
 <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
4.添加 FaceBook 的 ReactNative 调试的 activity
    <activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>

2. 编写原生的 ReactNative 模块 ,废话不多说,直接上代码

package com.allen.reactapp;

import android.app.Activity;
import android.os.Bundle;

import com.facebook.react.LifecycleState;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;

/**
 * 作者: allen on 16/7/31.
 */
public  class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                /**
                 * http://stackoverflow.com/questions/37951246/react-native-cannot-find-development-server-integrating-existing-android-app
                 * 调试模式下,建议直接写成 true 吧,我就因为这个错误,调了两天原因
                 */
//                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setUseDeveloperSupport(true)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "myreactactivity", null);

        setContentView(mReactRootView);
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }
    @Override
    protected void onPause() {
        super.onPause();

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

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

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

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


}


 

到此为止我们的Android项目Activity和配置文件以及完成了最基本的配置方法了。

========================================================================

========================================================================

3. 下面配置工程项目的 RN开发环境

  1. 先后顺序依次执行一下命令
 $ npm init

该命令会创建一个package.json文件,并且提示我们输入一些信息,默认不输入即可,不过name必须要为全英文小写哦,

##然后再依次去执行以下命令

 $ npm install --save react
 $ npm install --save react-native
 $ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

创建完成后,去工程目录下修改 package.json
在scripts标签那边添加如下代码:

"start":"node_modules/react-native/packager/packager.sh"

package_json

3. 工程目录下创建 index.android.js 由于是测试代码直接 Copy FaceBook 的源码



/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class AwesomeProject extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          我是 原生项目嵌入的 ReactNative
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('myreactactivity', () => AwesomeProject);


注意:此处需要修改注册的入口 保持一致,我的是 my_react_activity

4.检查以上所有步骤,有无遗漏,如果正常,接下来就可以顺利的运行你的混合 APP 了,如果还不行,你需要检查你的姿势是否正确?

运行你的 APP

  1. 在项目的工程路径运行以下命令来启动你的开发服务器
react-native start

或者执行

npm start
  1. android studio 调试你的 APP
    1. 演示效果图

===================

错误解决:

  Process: com.allen.reactapp, PID: 20469
java.lang.RuntimeException: java.util.concurrent.ExecutionException: java.lang.RuntimeException: Could not connect to development server.
Try the following to fix the issue:
Ensure that the packager server is running
Ensure that your device/emulator is connected to your machine and has USB debugging enabled - run 'adb devices' to see a list of connected devices
If you're on a physical device connected to the same machine, run 'adb reverse tcp:8081 tcp:8081' to forward requests from your device
If your device is on the same Wi-Fi network, set 'Debug server host & port for device' in 'Dev settings' to y
at com.facebook.react.ReactInstanceManagerImpl.createReactContext(ReactInstanceManagerImpl.java:911)
at com.facebook.react.ReactInstanceManagerImpl.access$700(ReactInstanceManagerImpl.java:100)
at com.facebook.react.ReactInstanceManagerImpl$ReactContextInitAsyncTask.doInBackground(ReactInstanceManagerImpl.java:197)
at com.facebook.react.ReactInstanceManagerImpl$ReactContextInitAsyncTask.doInBackground(ReactInstanceManagerImpl.java:180)
at android.os.AsyncTask$2.call(AsyncTask.java:295)
at java.util.concurrent.FutureTask.run(FutureTask.java:237)
at android.os.AsyncTask$SerialExecutor$1.run(AsyncTask.java:234)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1113)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:588)
at java.lang.Thread.run(Thread.java:818)
Caused by: java.util.concurrent.ExecutionException: java.lang.RuntimeException: Could not connect to development server.
Try the following to fix the issue:
Ensure that the packager server is running
Ensure that your device/emulator is connected to your machine and has USB debugging enabled - run 'adb devices' to see a list of connected devices
If you're on a physical device connected to the same machine, run 'adb reverse tcp:8081 tcp:8081' to forward requests from your device
If your device is on the same Wi-Fi network, set 'Debug server host & port for device' in 'Dev settings' to y
at com.facebook.react.common.futures.SimpleSettableFuture.get(SimpleSettableFuture.java:68)
at com.facebook.react.ReactInstanceManagerImpl.createReactContext(ReactInstanceManagerImpl.java:882)
    ... 9 more
Caused by: java.lang.RuntimeException: Could not connect to development server.
Try the following to fix the issue:
Ensure that the packager server is running
Ensure that your device/emulator is connected to your machine and has USB debugging enabled - run 'adb devices' to see a list of connected devices

解决办法:
.setUseDeveloperSupport(true) 调试模式下,建议直接写成 true 吧,

签名打包混合 APP
1. 将 js 文件存入 bundle 一起打包
执行命令:

curl -k "http://localhost:8081/index.android.bundle"> reactapp/src/main/assets/index.android.bundle

执行完命令成功,在 assets目录应该看到 index.android.bundle文件

Android studio 执行打包过程,作为一名 Android 老司机我就不再具体描述了

原 Android 移植 React Native 项目地址

React-Native:调用(Android)Native方法

有的时候我们使用React Native无法满足一些使用特定场景,这个时候就需要使用原生的Android方法,比如一些耗时的写操作,操作数据库或者多线程操作等。React Native可以直接调用系统的API(java方法),实现JavaScript与java语言的通讯,如果React Native中没有满足我们需求的Api,可以封装原生的方法提供JavaScript调用。

JavaScript和java通信是通过bridge实现的,在java层和JavaScript层的bridge分别存有相同的一份模块配置表。Java与JavaScript相互通信时,通过bridge里的配置表将所调用模块方式转为{moduleID,methodID,args}的形式传递给处理层,处理层通过bridge里的配置表找到对应的方法执行,如果有callback,则回传给调用层,如果没有执行就结束。

我们通过JavaScript调用Toast的例子来看下,JavaScript如何调用Java代码的。

新建一个项目:

react-native init app
在android的项目目录下面新建一个类RNToastModule,此类需要继承ReactContextBaseJavaModule。

ReactContextBaseJavaModule
ReactContextBaseJavaModule是一个抽象类,是用来被JavaScript调用对象的父类,我们需要Override一些ReactContextBaseJavaModule的方法。

首先要Override getName()方法:

   @Override
   public String getName() {
       return "RNToastAndroid";
   }

这个方法的返回值就是JavaScript中调用的名称,比如我们命名为RNToastAndroid,在JavaScript中可以这样调用:

var {NativeModules}=require('react-native');
var rnToastAndroid = NativeModules.RNToastAndroid;

在JavaScript可以这样调用:

rnToastAndroid.show("我的万能JS",  function (args) {
            alert(args)
        });

最后我们定义一个React调用的方法:

     @ReactMethod
    public void show(String msg, Callback callback){
        Toast.makeText(getReactApplicationContext(),"Js调用显示原生传递的参数是:"+msg,Toast.LENGTH_LONG).show();
        callback.invoke("RNToastModule 调用JS方法");
    }

完整RNToastModule代码:

/*
******************************* Copyright (c)*********************************\
**
**                 (c) Copyright 2015, Allen, china, shanghai
**                          All Rights Reserved
**
**                          
**                         
**-----------------------------------版本信息------------------------------------
** 版    本: V0.1
**
**------------------------------------------------------------------------------
********************************End of Head************************************\
*/
package com.app;

import android.widget.Toast;

import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

/**
 * 文 件 名: RNToastModule
 * 创 建 人: Allen
 * 创建日期: 17/1/2 23:17
 * 邮   箱: AllenCoder@126.com
 * 修改时间:
 * 修改备注:
 */
public class RNToastModule extends ReactContextBaseJavaModule{
    public RNToastModule(final ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return "RNToastAndroid";
    }
    @ReactMethod
    public void show(String msg, Callback callback){
        Toast.makeText(getReactApplicationContext(),"Js调用显示原生传递的参数是:"+msg,Toast.LENGTH_LONG).show();
        callback.invoke("RNToastModule 调用JS方法");
    }
}

这个使用了annotation定义的方式必须加上@ReactMethod。
这里的参数只能React Navive定义的参数。

注册ReactPackage
新建一个JsReactPackage类,继承ReactPackage。

/*
******************************* Copyright (c)*********************************\
**
**                 (c) Copyright 2015, Allen, china, shanghai
**                          All Rights Reserved
**
**                          
**                         
**-----------------------------------版本信息------------------------------------
** 版    本: V0.1
**
**------------------------------------------------------------------------------
********************************End of Head************************************\
*/
package com.app;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

/**
 * 文 件 名: JsReactPackage
 * 创 建 人: Allen
 * 创建日期: 17/1/2 22:34
 * 邮   箱: AllenCoder@126.com
 * 修改时间:
 * 修改备注:
 */
public class JsReactPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(final ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new RNToastModule(reactContext));
        return modules;
    }

    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(final ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

JsReactPackage创建了一个NativeModule的List。把JsReactPackage的实例都添加进去提供给JavaScript层调用。

需要在Application中实例化。
首先实现新建一个ReactNativeHost的实例并添加RNJavaReactPackage的实例:


private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { 
   @Override   
   protected boolean getUseDeveloperSupport() {   
       return BuildConfig.DEBUG;   
   } 
   @Override   
   protected List<ReactPackage> getPackages() { 
         return Arrays.<ReactPackage>asList(
                new MainReactPackage(), 
                //加入此处        
               new JsReactPackage()       
         ); 
     }
};

JavaScript中调用
在JavaScript显示Toast:

'use strict';

var {NativeModules}=require('react-native');
var rnToastAndroid = NativeModules.RNToastAndroid;

rnToastAndroid.show("我的万能JS",  function (args) {
            alert(args)
        });

这样就完成了从JavaScript中直接调用了Java中定义的方法。

参考链接

  1. https://segmentfault.com/a/1190000004486024
  2. http://blog.csdn.net/yuetingzhuying/article/details/51944254