首先保證安裝了node,watchman,yarn。
1.新建一個文件夾A,裏面新建一個文件夾android,然後把項目根目錄下所有內容放入這個android裏。直接全選複製的話沒有git,可以把整個項目移過去再改名爲android。
2.在A下新建package.json:
{
"name": "EffectCam",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "^16.4.2",
"react-native": "^0.56.0"
}
}
項目名稱和版本號無影響,下面的依賴版本號自行選擇。
3.使用yarn下載依賴:
下載Js文件所需的庫,一般來說都有react和react-native,下載的內容都會放在node_modules裏:
yarn add react yarn add react-native
4.新建index.js放在A下(Helloworld),若有多個js,需要從入口js開始進行樹形依賴,否則不會被導入,例如import * as Config from './second.js';:
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("MainModule", () => HelloWorld);
注意最後一行註冊的第一個參數,後面就要用這個字符串來加載這個js。
5.項目配置RN依賴:
implementation fileTree(dir: 'libs', include: ['*.jar'])
allprojects {
repositories {
maven {
// All of React Native (JS, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
}
}
defaultConfig {
ndk {
// abiFilters "armeabi-v7a","x86"
abiFilters "armeabi-v7a"
}
不配這個NDK的話會報找不到so文件的錯誤,網上的解決方案都是配v7a和x86,但是我的項目有別的so依賴,不支持x86,所以只寫v7a。爲什麼是這兩個呢,原因在node_modules\react-native\ReactAndroid\src\main\jni\Application.mk裏有這個的配置:
APP_BUILD_SCRIPT := Android.mk
APP_ABI := armeabi-v7a x86
APP_PLATFORM := android-16
APP_MK_DIR := $(dir $(lastword $(MAKEFILE_LIST)))
NDK_MODULE_PATH := $(APP_MK_DIR)$(HOST_DIRSEP)$(THIRD_PARTY_NDK_DIR)$(HOST_DIRSEP)$(REACT_COMMON_DIR)$(HOST_DIRSEP)$(APP_MK_DIR)first-party
APP_STL := gnustl_shared
# Make sure every shared lib includes a .note.gnu.build-id header
APP_LDFLAGS := -Wl,--build-id
NDK_TOOLCHAIN_VERSION := 4.8
我把這裏的x86也刪了,沒有問題。
6.將js打入index.android.bundle。安卓通過index.android.bundle去運行js文件,所以每次修改完js都要同步到index.android.bundle裏。(沒有assets文件夾和index.android.bundle先自己建一個):
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
7.使用:
一切都配完了,接下來就是使用了。新建一個維護ReactInstanceManager單例的類:
public class ReactUtils {
private volatile static ReactInstanceManager manager;
public static ReactInstanceManager getManager(){
if (manager == null){
synchronized (ReactInstanceManager.class){
if (manager == null){
manager = ReactInstanceManager.builder()
.setApplication(EffectApplication.getInstance())
.setBundleAssetName("index.android.bundle")
.setJSMainModulePath("index")
.addPackage(new MainReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
}
}
}
return manager;
}
}
新建一個activity extends AppCompatActivity:
private ReactRootView mReactRootView;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = new ReactRootView(this);
// 注意這裏的MyReactNativeApp必須對應“index.js”中的
// “AppRegistry.registerComponent()”的第一個參數
mReactRootView.startReactApplication(ReactUtils.getManager(), "MainModule", null);
setContentView(mReactRootView);
}
然後進這個aty就能看到hello world了,加載別的js也是一樣的。