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