android 添加React Native支持

官方文档

英文官方文档中文官方文档

个人实践

用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);

在你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); } }

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> 将DevSettingsActivity配置加入到AndroidManifest.xml文件中 <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

最终的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> 在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); } }); } }

在命令行中输入：npm start

QQ截图20160928191415.png

启动android程序

0617B9760DBA2A9368D75155FE14B0DC.jpg 674A73C4B407F69DA4716F9841B8EF1E.jpg EA81A6EDBAD0D41BE037E8737F548C3A.jpg