android原生项目整合ReactNative
1、配置环境
1.1、使用Android Studio创建Android原生项目
1.2、安装node.js
1.3、在项目根目录使用npm init命令创建package.json
注意项目名称要与将来android加载RN名称一致
1.4、使用npm install -save react,npm install -save react-native下载源文件
1.5、使用如下命令:
curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
在android根目录下生成.flowconfig文件作用于flow主要用来做静态代码检查。
1.6、在package.json文件的scripts属性添加
"start": "node node_modules/react-native/local-cli/cli.js start"
1.7、配置Android项目react-native依赖库
compile"com.facebook.react:react-native:+",//(+号代表使用最新版本)
1.8、添加ndk支持
ndk {
abiFilters "armeabi", "armeabi-v7a", "x86", "mips"
}
1.9、添加Gradle强制依赖解析策略
configurations.all {
resolutionStrategy.force 'com.google.code.findbugs:jsr305:3.0.0'
}
1.10、配置React-Native本地代码路径
在项目的根目录下的build.gradle中修改
1.11、在项目根目录下创建index.android.js文件
import React,{Component} 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}>这是React-Native组件</Text>
</View>
)
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor:'#ccc',
},
hello: {
fontSize: 20,
color: '#fff',
textAlign: 'center',
margin: 10,
},
});
//注意这里的rnapp哦
AppRegistry.registerComponent('rnapp', () => HelloWorld);
2、使用Android原生Activity
2.1、在android原生项目下重新新建一个Activity类
public class MainActivity extends AppCompatActivity 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(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager,"",null);
setContentView(mReactRootView);
}
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
@Override
protected void onResume() {
super.onResume();
if(mReactInstanceManager!=null){
mReactInstanceManager.onHostResume(this,this);
}
}
@Override
protected void onPause() {
super.onPause();
if(mReactInstanceManager!=null){
mReactInstanceManager.onHostPause(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);
}
}
2.2、修改AndroidManifest.xml配置文件
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.taiji.rntest">
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.SYSTEM_OVERLAY_WINDOW" />
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>
</application>
</manifest>
2.3、通过cmd命令react-native start运行服务
2.4、使用android studio运行android应用
按照惯例会出现如下错误:Could not get BatchedBridge, make sure your bundle is packaged correctly
百度会有解决办法。
解决办法如下,在android项目中创建assets目录,在根目录命令行输入如下命令
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output cubecare4.0/src/main/assets/index.android.bundle --assets-dest cubecare4.0/src/main/res/
会在assets目录下生产如下文件
2.5、接着按之前的步骤运行就会出现理想中的结果
2.6、不足之处,没找到menu键没办法调出开发者菜单,没找到如何修改js文件后重新加载的方法。(如果有童鞋知道的话麻烦留言告知下,不胜感激)
3、使用ReactActivity
3.1、换种方式解决之前的不足之处。
3.2、将Activity类做如下修改
public class FirstActivity extends ReactActivity{
@Nullable
@Override
protected String getMainComponentName() {
return "rnapp";
}
}
3.3、创建MainApplication类
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
);
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
}
3.4、在AndroidManifest.xml中应用新创建的application
<application
android:name=".MainApplication"
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".FirstActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>
</application>
3.5、模拟器使用时,双击键盘R进行重新加载,Ctrl+M键调出开发者菜单
3.6、Debug调试
在开发者菜单中点击 Debug JS Remotely
如果系统安装Chrome浏览器会出现如下页面
根据提示Ctrl+Shift+J打开开发者模式,在Sources中找到index.android.js文件进行断点调试