原生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">
<in
4000
tent-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