Android 原生调用React Native 说明

1.新建一个Android 项目
2.在项目的根目录下面npm init
3.npm install --save react-native
这里需要记住的 name 这个是在注册入口组件时候需要的
4.curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
5.打开目录生成的package.json 文件
在 "scripts": {}里面添加 "start": "node node_modules/react-native/local-cli/cli.js start",如果有其他的使用逗号隔开

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },

6.在当前目录下新建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,  
      },  
        });  
          
    //这里的HelloWorld 就是 package.json 里面的name 最后一个=>指向的是这个js文件的主类的类名称 这里是HelloWorld
AppRegistry.registerComponent('HelloWorld', () => HelloWorld); 

7.在AndroidMainfest.xml 定义权限和设置类

<uses-permission android:name="android.permission.INTERNET"></uses-permission>
<uses-permission android:name="android.permission.RECEIVE_SMS"></uses-permission>
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.SYSTEM_OVERLAY_WINDOW" /

<activity android:name="ReactNativeActivityBak"></activity>

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>

8.修改工程的build.gradle文件的依赖

allprojects {
    repositories {
        google()
        jcenter()
        maven{
            //注意当前的目录是$rootDir，你要以当前目录为准去找node_modules，这个目录是你npm init 密令生成的目录
            url "$rootDir/node_modules/react-native/android"
        }
    }
}

9.在app.build.grable文件里面添加reactnative 依赖

dependencies {
implementation "com.facebook.react:react-native:+"
}

10.创建我们的ReactNativeActivityBak 类 加载ractnative 页面内

public class ReactNativeActivityBak extends AppCompatActivity implements DefaultHardwareBackBtnHandler {

    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Toast.makeText(this,"dddd",Toast.LENGTH_SHORT).show();
        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModulePath("index.android")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "test", 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(this);
        }
    }

    @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);
    }

}

11.安装程序
12.安装程序后，需要在摇晃手机，然后 dev-setting 找到设置host,port，里面设置你的电脑的ip加上8081端口。
13.然后在项目根目录，npm start 启动项目，重新在app reload 项目