React Native集成到已有项目中

1.设置项目目录结构

       在原来项目中创建/android子目录，把之前所有的android项目都拷到/android子目录（因为react native支持android和ios,此时android只作为一个子模块）

2.安装JavaScript依赖包

         1)在项目（注意不是子项目）的根目录下创建名称为package.json的空文本文件，然后输入下面内容

{
	"name": "MyReactNativeApp",
	"version": "0.0.1",
	"private": true,
	"scripts": {
		"start": "node node_modules/react-native/local-cli/cli.js start"
	},
	"dependencies": {
		"react": "16.0.0-alpha.6",
		"react-native": "0.44.3"
	}
}

注意dependencies中的react和react-native两个版本号，如果不一致可能导致后面的错误，建议先查看已安装的版本号，再填入，查询方法为在控制台输入npm info react和npm info react-native

2)使用npm来安装React和React Native 模块，在控制台输入 npm install，这些模块会安装到项目的根目录下的/node_modules

 3.把React Native添加到应用中（即添加到android项目中）

1)在app中的build.gradle文件中添加React Native依赖

dependencies{
    compile "com.facebook.react:react-native:+"
}

2)在项目的build.gradle文件中添加React文件中为React Native添加一个maven依赖入口，必须写在“allprojects”代码块中：

allprojects{
	repositories{
		maven{
			url "$rootDir/../node_modules/react-native/android"
		}
	}
}

4.配置权限（安卓系统权限）

接着，在 AndroidManifest.xml 清单文件中声明网络权限:

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

如果需要访问 DevSettingsActivity 界面（即开发者菜单），则还需要在 AndroidManifest.xml 中声明:

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

开发者菜单一般仅用于在开发时从Packager服务器刷新JavaScript代码，所以在正式发布时你可以去掉这一权限。

 5.代码集成（React Native代码）

1）创建一个index.js文件，随便写几句，比如：

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('MyReactNativeApp', () => HelloWorld);

  6.创建React Native 运行容器（webViwe）

1)创建一个专属的activity，创建或者布局一个ReactRootView作为顶层容器，将事件传递给容器

public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);


	mReactRootView = new ReactRootView(this);
	mReactInstanceManager = ReactInstanceManager.builder()
			.setApplication(getApplication())
			.setBundleAssetName("index.android.bundle")
			.setJSMainModulePath("index")
			.addPackage(new MainReactPackage())
			.setUseDeveloperSupport(BuildConfig.DEBUG)
			.setInitialLifecycleState(LifecycleState.RESUMED)
			.build();


	// 注意这里的MyReactNativeApp必须对应“index.android.js”中的
	// “AppRegistry.registerComponent()”的第一个参数
	mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);


	setContentView(mReactRootView);
}


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


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


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


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


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


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


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


@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);
}
}

2）声明activity，并指定主题

 <activity
    android:name=".MyReactActivity"
    android:label="@string/app_name"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar">
</activity>

7.测试运行结果

1）在控制台中的项目根目录执行 npm start 开始运行服务，这时会启动一个8081端口，app到时会从这个端口加载页面（调试时使用，正式打包后可以不用）
2）在android studio中运行项目，将app安装到模拟器，此时app未签名，真机上可能无法安装

8.页面打包

1）项目目录下运行指令

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

注意--bundle-output 和 --assets-dest 路径 

9.android studio可能用到的操作

1）创建assets目录，在app项目中->右键->New->Folder->assets Folder 

        

2)签名服务，在build>Generate Signed APK,可以创建或者选择key store