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：

f8dbf3e4ea5dbdad3e0c59834b94a06ceb8c5c00

添加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 (      
            
     
      Hello, World
           
        )  }}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文件中

将DevSettingsActivity配置加入到AndroidManifest.xml文件中

最终的AndroidManifest.xml文件内容为

在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