题引:
- React Native 官方给出的植入原生应用的方法,一直是 行不通的,为此我单独写一篇博文来介绍如何正确的植入Android原生应用。
一
模块配置:
- 1、单独创建一个文件夹NewSvn,将已存在的原生项目,单独放到该文件夹中。原生项目的命名暂时确定为:test
- 2、在NewSvn文件夹中,按住Shift+鼠标右键,打开命令行窗口。
- 3、命令行中输入:npm init
- 4、一直按回车,直至确认完毕。
- 5、命令行中再次输入:npm install –save react react-native
- 6、等待响应结束。
- 7、响应结束,此时NewSvn文件夹中应该有三个文件:test,package.json,node_modules
- 8、打开360浏览器的下载器,新建下载:https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
- 9、将下载好的.flowconfig文件,放到NewSvn文件夹中,此时,该文件下四个文件:test,package.json,node_modules,.flowconfig
- 10、打开package.json 文件。
- 11、将其中的部分内容自行矫正修改:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node node_modules/react-native/local-cli/cli.js start",
}
- 12、在NewSvn文件夹中创建:index.android.js 文件。此时NewSvn文件夹中有五个文件。
文件内容:
'use strict';
import React 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}>Hello, World</Text>
</View>
)
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
hello: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
- 13、使用AndroidStudio打开已存在”test”项目,添加如下代码:
Module的build.gradle文件中添加:
dependencies {
...
compile "com.facebook.react:react-native:+" // From node_modules.
}
Project的build.gradle文件中添加:
allprojects {
repositories {
...
maven {
// All of React Native (JS, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
}
}
- 14、在Module的Main文件夹下创建:assets文件夹。
- 15、创建MyReactActivity,并在AndroidManifest中添加
<activity
android:name=".activity.MyReactActivity"
android:label="@string/app_name"
android:theme="@style/Theme.AppCompat.Light.NoActionBar">
<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" />
MyReactActivity文件内容:
public class MyReactActivity 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(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
//.setUseOldBridge(true) // uncomment this line if your app crashes
.build();
mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);
setContentView(mReactRootView);
}
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
@Override
protected void onPause() {
super.onPause();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostPause(this);
}
}
@Override
protected void onResume() {
super.onResume();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostResume(this,this);
}
}
@Override
protected void onDestroy() {
super.onDestroy();
if (mReactInstanceManager != null) {
mReactInstanceManager.destroy();
}
}
@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);
}
}
- 16、OK,现在可以重新编译一遍项目,然后依旧在NewSvn文件夹中打开命令行,输入:
react-native bundle --platform android --dev false --ent
ry-file index.android.js --bundle-output NewSvn/test/src/main/assets/index.andr
oid.bundle --assets-dest NewSvn/test/src/main/res/
需要注意的是:如果文件夹和项目起名没有按照我说做的话:注意:
NewSvn/test/src/main/assets/index.andr
oid.bundle --assets-dest NewSvn/test/src/main/res/
此处:需要提出按成自己的项目路径。NewSvn/test
- 17、 执行完上述代码之后:项目中assets文件夹中应该会有两个文件了:index.android.bundle 以及 index.android.bundle.meta
- 18、NewSvn根目录打开命令行:输入
npm start
19、run起你的项目吧。
二
BUG集锦:
- 如果严格按照我上述的操作,就会规避大部分BUG,但真实运行还是有部分BUG,如真机白屏的问题,这种问题请动动小手百度或者google一下解决。
- 如果还有其他的植入真机问题请在下方给我留言。