官方文档
个人实践
用android studio创建一个基本的android hello world程序
2016-09-28_172701.png在项目根目录中通过npm向导生成package.json文件，在cmd中输入命令:
npm init
2016-09-28_173638.png在package.json文件中添加启动脚本
"start": "node node_modules/react-native/local-cli/cli.js start"
2016-09-28_174027.png
注：这里可能会报一个json的错误，请仔细检查json：
添加react-native npm依赖，在命令行输入
npm install react react-native --save创建index.android.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('HelloWorld', () => HelloWorld);
AI 代码解读
在你app的build.gradle文件中添加react native依赖库
2016-09-28_175004.png在你project的build.gradle文件中添加react native路径
2016-09-28_175125.png修改AndroidManifest.xml文件中添加权限
<uses-permission android:name="android.permission.INTERNET" />添加AndroidReactActivity
package com.platform.ourplam.androidreacttest;
import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import com.facebook.react.LifecycleState;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;
public class AndroidReactActivity 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.onHostPause();
}
}
@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);
}
}
AI 代码解读
build android项目否则上一步，代码导入包会报错
2016-09-28_185145.png将AndroidReactActivity加入AndroidManifest.xml文件中
<activity
android:name=".AndroidReactActivity"
android:label="@string/app_name"
android:theme="@style/Theme.AppCompat.Light.Dialog">
</activity>
AI 代码解读
- 将DevSettingsActivity配置加入到AndroidManifest.xml文件中
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
AI 代码解读
最终的AndroidManifest.xml文件内容为
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.platform.ourplam.androidreacttest">
<uses-permission android:name="android.permission.INTERNET" />
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:theme="@style/AppTheme.NoActionBar">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name=".AndroidReactActivity"
android:label="@string/app_name"
android:theme="@style/Theme.AppCompat.Light.Dialog">
</activity>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>
</manifest>
AI 代码解读
- 在MainActivity中添加Button，添加点击事件启动AndroidReactActivity
public class MainActivity extends AppCompatActivity {
Button btn;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btn = (Button) super.findViewById(R.id.btn);
btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(MainActivity.this, AndroidReactActivity.class);
startActivity(intent);
}
});
}
}
AI 代码解读
在命令行中输入：npm start
QQ截图20160928191415.png启动android程序
0617B9760DBA2A9368D75155FE14B0DC.jpg
674A73C4B407F69DA4716F9841B8EF1E.jpg
EA81A6EDBAD0D41BE037E8737F548C3A.jpg
