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