您的位置:首页 > Web前端 > React

【React Native开发】React Native移植原生Android项目(Mac用)

2016-04-07 19:53 274 查看
注意:本教程默认已经安装所有的配置,例如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项目/
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  react native android mac