【React Native开发】React Native移植原生Android项目（Mac用）

注意：本教程默认已经安装所有的配置，例如react-native、node.js等

第一步、创建React Native工程目录

先创建一个文件夹，命名为HelloWorld

第二步、创建android工程

通过android studio在HelloWorld文件夹下面创建android工程，工程名命名为android。

第三步、配置android工程

1、在项目的build.gradle文件中添加依赖，我的react native的版本。大家可以根据自己的版本进行依赖添加：具体如下：

compile 'com.facebook.react:react-native:0.20.1'

2、在AndroidManifest.xml文件中加入网络权限

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

3、在AndroidManifest.xml中注册debug模式下的调试Activity

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

4、修改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, "showHelloWorld", 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);
}
}
}

其中有一句代码如下：

mReactRootView.startReactApplication(mReactInstanceManager, "showHelloWorld", null);

此代码中的“showHelloWorld”后面要用到

第四步、其他配置

1、启动终端，进入到HelloWorld文件下，运行命令npm init，此时需要用户输入一些信息，其中只有name是必须的，用户输入name，其他 信息直接默认就可以。执行完这一步，用户可以在HelloWolrd文件夹下看到pageage.json文件，打开就可以看到刚才输入的配置信息。

2、运行命令npm install –save react-native，安装react native模块以及相关node模块。结束后会在HelloWorld文件夹中看到node_modules文件夹。PS：此过程时间有一些长，网络不好，还有可能有的依赖下载不下来，我就因为这个踩了坑。运行的时候缺少依赖。又重新npm install的。

3、配置flow，运行命令如下：

curl -o .flowconfig  https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig[/code] 
4、修改之前生成的package.json文件，在scripts标签中添加如下代码

删除原来的

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


5、新建js文件、命名为index.android.js，添加如下代码：

'use strict';
var React = require('react-native');
var {
Text,
View
} = React;

class MyAwesomeApp extends React.Component {
render() {
return (
<view style={styles.container}>
<text style={styles.hello}>Hello, World</text>
</view>
)
}
}
var styles = React.StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
hello: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
React.AppRegistry.registerComponent('showHelloWorld', () => MyAwesomeApp);


还记得上文提到的那个showHelloWorld吗？在这里用到了，这两个要对应起来。并且此js文件中的
class MyAwesomeApp extends React.Component {


这行代码中的MyAwesomeApp要和
React.AppRegistry.registerComponent('showHelloWorld', () => MyAwesomeApp)


这行代码中的MyAwesomeApp对应起来！

6、启动npm：运行命令npm start等npm启动，注意其中的端口号，一般是8081

7、运行android:在HelloWorld目录下，运行命令react-native run-android，启动app！

注意：1、如果是在真机测试，需要开启弹窗的权限

2、真机测试，需要连接服务器，app启动后，摇一摇，打开debugActivity，点击最后行，输入你电脑的ip和端口号，就是刚才提到的端口号，一般是8081

到此结束！

第一次写博客，欢迎指出错误的地方！

参考：http://www.lcode.org/【react-native开发】react-native移植原生android项目/