React Native & Android集成

在一个现有的APP里集成ReactNative. 都是杂碎时间搞的，写的流程有些乱。。。。

1. 新建一个项目

在Android studio 里直接创建一个空工程（这里方便测试可以先把项目的目录改成android），在app的依赖里面添加React Native的依赖：

dependencies {
    compile fileTree(dir: "libs",include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
}

然后在AndroidManifest.xml加入访问网络权限:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

为了让项目支持调试RN，需要在AndroidManifest.xml里面加入RN的DevSettingsActivity，如下：

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

由于ReactNative的minSdkVersion为16，所以有可能需要在Manifest里添加：

<uses-sdk tools:overrideLibrary="com.facebook.react" />

修改MainActivity，如下：

public class MainActivity 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())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        mReactRootView.startReactApplication(mReactInstanceManager,"HelloWorld",null);
 
        setContentView(mReactRootView);
    }
 
    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }
 
    @Override
    protected void onPause() {
        super.onPause();
 
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onPause();
        }
    }
 
    @Override
    protected void onResume() {
        super.onResume();
 
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onResume(this,this);
        }
    }
 
    @Override
    public void onBackPressed() {
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onBackPressed();
        } else {
            super.onBackPressed();
        }
    }
 
    @Override
    public boolean onKeyUp(int keyCode,KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
            mReactInstanceManager.showDevOptionsDialog();
            return true;
        }
        return super.onKeyUp(keyCode,event);
    }
 
}

setBundleAssetName先不用管。后面离线打包的时候会用到。
PS:其实可以认为是ReactNative提供了一个FrameLayout。这样就很容易理解了。

在工程上一级目录下执行npm init,指定name等属性，自动创建package.json文件。
在工程上一级目录下新建一个index.android.js文件：

'use strict';
 
import React,{
  Text,View
} from 'react-native';
 
class ReactNativeProject extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.hello}>Hello,World</Text>
        <Text>我来自ReactNative</Text>
      </View>
    )
  }
}
var styles = React.StyleSheet.create({
  container: {
    flex: 1,justifyContent: 'center',},hello: {
    fontSize: 20,textAlign: 'center',margin: 10,});
 
React.AppRegistry.registerComponent('HelloWorld',() => ReactNativeProject);

在项目上一级目录执行npm install --save react-native,这条命令会在目录下生成node_modules文件夹并添加react-native的npm依赖(千万不要用cnpm,唉说多了都是泪。。。)。

在项目上一级目录下执行：

curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

在上面生成的package.json中的scripts里面添加一行：

"start": "node node_modules/react-native/local-cli/cli.js start"

例如：

{
  "name": "react-demo","version": "1.0.0","description": "","main": "index.js","scripts": { "start": "node node_modules/react-native/local-cli/cli.js start","test": "echo \"Error: no test specified\" && exit 1" },"author": "","license": "ISC","dependencies": { "react-native": "^0.39.2" } }

code目录

首先启动RN的npm本地服务：

react-native run-android

然后运行就可以了。。。

经试验如果Android项目的目录名字不是android的话，会提示没有找到Android工程Android project not found. Maybe run react-native android first? .这时候只能先执行react-native start 和 adb reverse tcp:8081 tcp:8081,然后使用Android studio run(或者./gradlew assembleDebug)安装在手机。以后更新摇一摇手机reload一下就OK了，同样不需要再编译apk了。

如果需要在Android studio里面来安装的话，就会提示”Could not get BatchedBridge….”,即RN找不到要加载的包，需要手动执行：

react-native start
adb reverse tcp:8081 tcp:8081

react-native start
adb reverse tcp:8081 tcp:8081

关于离线打包：

react-native bundle –platform android –dev false –entry-file index.android.js –bundle-output android/app/src/main/assets/index.android.bundle –assets-dest android/app/src/main/res

一条命令就可以打包到指定的目录，就不需要在依赖于服务端了
React Native 优先请求服务端(localhost)的连接，否则去assets里面找，如果还是没有找到才会报错。

关于代码结构的优化

在Native + RN的混合工程中，希望写的代码都在Android项目目录下，比较好维护。就是说要把index.android.js等自己写的js还有资源放在Android工程目录下。关于node_modules目录，如果也放在Android工程下，由于文件太多，AS都能卡死掉，，，所以想要的目录节后为：

├── node_modules  
├── android_proj 
│   ├── app  
│   │   ├── build..  
│   │   ├── src..  
│   │   └── build.gradle  
│   ├── index.android.js  
│   ├── rnjs..

调整成这样的目录后，使用`react-native start 启动服务，手机上提示 404,RN的packager在默认的目录中没有找到入口js文件。在启动服务时需要添加一个目录。

react-native start --root android_proj

link=>
https://www.zhangningning.com.cn/blog/Android/android_react_native.html

React Native & Android集成

1. 新建一个项目

关于离线打包：

关于代码结构的优化

猜你在找的React相关文章