在原有Android项目中快速集成React Native

前言

对于现有的大多数项目来说都不是从头构建的，而要在原有项目的基础上引入React Native则肯定和用react-native init xxx创建工程不同。因此下面就来说下具体操作。不过在真正开始之前还是要先说明一下工具配置。

• NodeJS：选择对应的系统下载并安装，安装完即可在终端运行npm 命令。
• 配置源，众所周知因为墙的原因，所以最好配置国内的源。

配置方法如下：

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

1.加入package.json文件以及index.android.js文件

一般地，我们可以在项目根目录下创建package.json文件以及index.android.js文件。

• package.json文件类似与Android中的build.gradle文件，在其中主要配置了React Native所需的依赖库以及一些脚本语句。以下的代码可以看作是一个package.json文件的模版,版本号可以根据需要而定。

{
  "name": "XXX",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.0.0",
    "react-native": "0.50.3",
    "react-native-device-info": "^0.12.1"
  },
  "devDependencies": {
    "babel-jest": "21.2.0",
    "babel-preset-react-native": "4.0.0",
    "jest": "21.2.1",
    "react-test-renderer": "16.0.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

• index.android.js 文件是RN程序的入口文件。通常index.android.js 文件如下：

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

class App extends Component{
    //...其他方法
    render(){
        return(
            <View>
                <Text>this is React Native  Page</Text>
            </View>
        );
    }
     //...其他方法
}

AppRegistry.registerComponent('XXX', () => App);

然后，在该目录下打开终端，运行 npm i 命令，安装React Native 所需的依赖，安装完成后会在根目录下创建node_modules文件夹，下载的依赖就在这个文件夹下。到此，第一步的工作已经完成了。

-----分割线------
实际上我们不会将RN代码放到Android工程里，因为在一般的公司项目中，使用SVN或者Git进行管理，客户端目录下一般都会有Android和iOS两个目录区分两个端。而React Native作为一个跨平台的框架，放在Android或者iOS目录里都不太合适。因此个人认为比较好的做法是在Android和iOS同级目录创建一个ReactNative目录，放置RN项目的代码。因此目录结构大致如下：

.
├──Android
    ├──trunk
    ├──branches
    └──tags    
├──iOS      
    ├──trunk
    ├──branches
    └──tags                        
└──ReactNative    
    ├──trunk
    ├──branches
    └──tags 

此时，RN项目的代码包括package.json文件以及index.android.js文件都是在trunk目录下，自然地，需要在trunk目录打开终端，运行运行 npm i 命令，安装React Native 所需的依赖，而node_modules文件夹也自然会在该文件夹内创建。

2.在Android项目中配置ReactNative依赖

对于package.json文件在Android 工程中的情况

首先编辑在项目目录下build.gradle文件。

allprojects {
    repositories {
        google()
        jcenter()
        //添加这个仓库
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/node_modules/react-native/android"
        }
    }
}

然后在编辑app目录下的build.gradle文件，添加React Native依赖。

   implementation 'com.facebook.react:react-native:0.50.3'

注意该版本号需要与package.json文件中配置的RN版本号保持一致。
之所以需要在项目的build.gradle文件中添加maven配置，是因为Android项目默认的依赖包的源jcenter()并不包含最新版的React Native（它只到0.20.1）。

对于ReactNative独立目录情况

与第一种情况并无太大区别，只是RN的maven仓库路径有所不同。因为通过版本控制拉取下来的工程位置各有不同，为了避免开发人员对项目目录下的build.gradle文件编辑冲突，推荐使用如下方式：

//加载local.properties配置
Properties properties = new Properties()
InputStream inputStream = project.rootProject.file('local.properties').newDataInputStream();
properties.load(inputStream)

allprojects {
    repositories {
        jcenter()
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url properties.getProperty('reactnative.dir')
        }
    }
}

其中local.properties文件不需要提交版本控制，并在其中添加一个reactnative.dir属性，属性值为RN的android工程目录路径，例如在我的项目中

reactnative.dir=/Users/littlebyte/svn/ReactNative/ReactNative/node_modules/react-native/android

3.创建RN视图承载的Activity或Fragment

创建RN视图承载的Activity

public class MyReactActivity extends ReactActivity {

@Override
protected String getMainComponentName() {
    //该返回值需要与N程序的入口文件index.android.js中的注册的名字相同
    return "XXX";
}

}

创建RN视图承载的Fragment

与Activity不同,在Fragment中加载RN有点不一样。但在Android中加载RN，无论是在Activity还是Fragment，加载的都只是一个View而已。而给Fragment设置View，只需要Fragment的onCreateView返回RN的View即可。代码如下：

public class MyFragment extends Fragment {
    public static final String COMPONENT_NAME = "MyFragment";
    private ReactRootView mReactRootView;

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
        mReactRootView = new ReactRootView(context);
        mReactRootView.startReactApplication(
                getReactNativeHost().getReactInstanceManager(),
                COMPONENT_NAME,
                null);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        super.onCreateView(inflater, container, savedInstanceState);
        return mReactRootView;
    }

    @Override
    public void onDestroy() {
        super.onDestroy();
        if (mReactRootView != null) {
            mReactRootView.unmountReactApplication();
            mReactRootView = null;
        }
        if (getReactNativeHost().hasInstance()) {
            getReactNativeHost().getReactInstanceManager().onHostDestroy(getActivity()
            );
        }
    }

    protected ReactNativeHost getReactNativeHost() {
        return ((ReactApplication) getActivity().getApplication()).getReactNativeHost();
    }

    public ReactInstanceManager getReactInstanceManager() {
        return getReactNativeHost().getReactInstanceManager();
    }

}

而后Fragment该怎么用就怎么用。

4.修改Application

修改自定义的 Application ，实现 ReactApplication 接口。

public class MainApplication extends Application implements ReactApplication {

    public final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage()
            );
        }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }

}

5.修改Application，添加相应的权限以及Activity声明

RN需要添加以下权限：

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

除了声明自定义的Activity，还需要添加DevSettingsActivity，用来修改RN的相关设置。

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

至此，Android原生项目集成RN的工作就基本完成了。

6.调试

要调试首先需要启动RN的本地服务器。在package.json文件所在目录打开终端，运行react-native start命令即可启动本地服务器。然后安装并运行App。
如果使用模拟器调试则可以直接运行打开RN的页面，而如果使用真机调试还需要摇一摇弹出设置菜单，点击Dev Settings，设置Debug server host&port for device,填入你电脑的ip:8081即可。
之后就可以愉快的调试运行了。