原生APP整合ReactNative

来源：互联网发布：淘宝卖家都有什么软件编辑：程序博客网时间：2024/05/02 20:50

原生APP整合ReactNative

1，项目下的build.gradle增加

   repositories {        ....        jcenter()                 maven {          url "$rootDir/../node_modules/react-native/android"         }         ....      }

2，app下的build.gradle

    //备注 版本最好是  compileSdkVersion 23  buildToolsVersion "23.0.1"    defaultConfig {      ...        ndk {            abiFilters "armeabi-v7a", "x86"        }      ...    }    dependencies {        ...        compile"com.facebook.react:react-native:+"        ...    }

3，AndroidManifest.xml增加权限

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

4，方式1 -> 步骤：1,创建MainApplication,2,创建MainActivity 3,在androidmainifest.xml增加2个文件的配置

MainApplication:

    package base.simple.com.reactdemo.test1;    import android.app.Application;     import com.facebook.react.ReactApplication;    import com.facebook.react.ReactNativeHost;    import com.facebook.react.ReactPackage;    import com.facebook.react.shell.MainReactPackage;    import java.util.Arrays;    import java.util.List;    public class MainApplication extends Application implements ReactApplication {      private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {        @Override        protected boolean getUseDeveloperSupport() {          return true;        }        @Override        protected List<ReactPackage> getPackages() {          return Arrays.<ReactPackage>asList(              new MainReactPackage()          );        }      };      @Override      public ReactNativeHost getReactNativeHost() {          return mReactNativeHost;      }}

MainActivity:

    package base.simple.com.reactdemo.test1;    import com.facebook.react.ReactActivity;    public class MainActivity extends ReactActivity {        /**         * Returns the name of the main component registered from JavaScript.         * This is used to schedule rendering of the component.         */        @Override        protected String getMainComponentName() {            return "firstReactDemo";        }}

AndroidManifest.xml

 <application        android:allowBackup="true"        android:name=".test1.MainApplication"        android:theme="@style/AppTheme">        <activity android:name=".test1.MainActivity">            <intent-filter>                <action android:name="android.intent.action.MAIN" />                <category android:name="android.intent.category.LAUNCHER" />            </intent-filter>        </activity>    </application>

4，方式2 步骤：创建MainActivity，并注册到AndroidManifest.xml中去

package base.simple.com.reactdemo;import android.app.Activity;import android.os.Bundle;   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 MainActivity 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(true)                .setInitialLifecycleState(LifecycleState.RESUMED)                .build();        mReactRootView.startReactApplication(mReactInstanceManager, "firstReactDemo", null);        setContentView(mReactRootView);    }    @Override    public void invokeDefaultOnBackPressed() {        super.onBackPressed();    }    protected void onPause() {        super.onPause();        if (mReactInstanceManager != null) {            mReactInstanceManager.onHostPause();        }    }    @Override    protected void onResume() {        super.onResume();        if (mReactInstanceManager != null) {            mReactInstanceManager.onHostResume(this, this);        }    }    @Override    public void onBackPressed() {        if (mReactInstanceManager != null) {            mReactInstanceManager.onBackPressed();        } else {            super.onBackPressed();        }    }}

5注意原生中的 getMainComponentName 方法返回的字符串就是rn页面的名称 “firstReactDemo” 这很重要。

原生已经准备就绪，接下来接入rn：在项目根目录创建好react_native目录，并在此目录内新建一个文件package.json

package.json

{  "name": "firstReactDemo",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "start":"node_modules/react-native/packager/packager.sh"  },  "author": "",  "license": "ISC",  "dependencies":{    "react":"15.2.1",    "react-native":"^0.29.0"  }}

6，在react_native目录下创建 index.android.js

index.android.js

import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View} from 'react-native';class firstReactDemo extends Component {  render() {    return (      <View style={styles.container}>        <Text style={styles.welcome}>          HELLO WORD        </Text>        <Text style={styles.instructions}>         the firstReactDemo----------!!!        </Text>        <Text style={styles.instructions}>         DSLFJSDLJFLSDFJDSLLFJ        </Text>      </View>    );  }}const styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'center',    alignItems: 'center',    backgroundColor: '#F5FCFF',  },  welcome: {    fontSize: 20,    textAlign: 'center',    margin: 10,  },  instructions: {    textAlign: 'center',    color: '#333333',    marginBottom: 5,  },});AppRegistry.registerComponent('firstReactDemo', () => firstReactDemo);

7，用终端进入项目下的react_native目录，执行命令如下：

顺序执行：可能需要等待一段时间。

npm install 如果用真机的话先执行 adb reverse tcp:8081 tcp:8081 然后再执行下面语句npm start

8，启动app.perfect
案例下载git地址： https://github.com/dodan200/ReactDemo

0 0