原生APP整合ReactNative

原生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