一.初始化項目--有兩種方式:
1.安裝一個不含Android和iOS模塊的React Native項目
(1)進入workspace文件夾
(2)創建項目文件
mkdir RNBearin或者直接創建RNBearin文件夾
(3)進入RNBearin文件夾
(4)創建package.json文件
(5)在package.json裏面添加項目的內容:
{
"name": "RNBearin",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
}
}
(6)安裝一個不含Android和iOS模塊的React Native項目
npm install --save react-native
(7)如果提示缺少什麼就用下面命令繼續安裝
npm install --save (缺少的文件)
(8)新建一個Android項目RNBearinAndroid放在RNBearin目錄文件下
用Android Studio打開項目在app下的build.gradle添加
implementation "com.facebook.react:react-native:+"
(9)在項目根目錄下的build.gradle添加
allprojects {
repositories {
maven {
url("$rootDir/../node_modules/react-native/android")
}
}
}
(10)添加網絡權限
<uses-permission android:name="android.permission.INTERNET" />
(11)如果用到Dev Settings功能,即添加RN的調試Activity,需要在application下添加
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>
(12)在app下的build.gradle裏面android下的defaultConfig中添加
ndk {
abiFilters "armeabi", "x86"
}
(13)在RNBearin文件夾下創建index.js文件並添加如下代碼:
import {AppRegistry} from 'react-native';
import App from './js/App';
AppRegistry.registerComponent('RNBearin', () => App);
(14)在RNBearin文件夾創建js文件夾,並在js文件夾下創建App.js文件,並添加代碼:
import React, {Component} from 'react';
import {Platform,StyleSheet,Text,View} from 'react-native';
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>This is App</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
(15)在webstorm設置裏面Languages&Frameworks下的JavaScript把JavaScript langua version設置爲Flow
(16)在Android項目裏面創建RNPageActivity(帶界面xml),RNPageActivity,添加生命週期,添加開發者菜單,Ctrl + M 打開RN開發者菜單,雙擊R 重新加載JS,完整代碼如下
public class RNPageActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler { private static String moduleName; private ReactRootView mReactRootView; private ReactInstanceManager mReactInstanceManager; private boolean mDeveloperSupport = true; private DoubleTapReloadRecognizer mDoubleTapReloadRecognizer; public static void start(Context context, String moduleName, String initParams) { RNPageActivity.moduleName = moduleName; Intent intent = new Intent(context, RNPageActivity.class); intent.putExtra("initParams", initParams); context.startActivity(intent); } @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mReactRootView = new ReactRootView(this); mReactInstanceManager = ReactInstanceManager.builder() .setApplication(getApplication()) .setBundleAssetName("index.android.bundle") .setJSMainModulePath("index") .addPackage(new MainReactPackage()) .setUseDeveloperSupport(BuildConfig.DEBUG) .setInitialLifecycleState(LifecycleState.RESUMED) .build(); Bundle bundle = new Bundle();//RN初始化時傳遞給JS的初始化數據 // The string here (e.g. "MyReactNativeApp") has to match // the string in AppRegistry.registerComponent() in index.js mReactRootView.startReactApplication(mReactInstanceManager, moduleName, bundle); setContentView(mReactRootView); mDoubleTapReloadRecognizer = new DoubleTapReloadRecognizer(); if (getSupportActionBar() != null) { getSupportActionBar().hide(); } } public boolean onKeyUp(int keyCode, KeyEvent event) { if (getUseDeveloperSupport()) { if (keyCode == KeyEvent.KEYCODE_MENU) {//Ctrl + M 打開RN開發者菜單 mReactInstanceManager.showDevOptionsDialog(); return true; } boolean didDoubleTapR = Assertions.assertNotNull(mDoubleTapReloadRecognizer).didDoubleTapR(keyCode, getCurrentFocus()); if (didDoubleTapR) {//雙擊R 重新加載JS mReactInstanceManager.getDevSupportManager().handleReloadJS(); return true; } } return super.onKeyUp(keyCode, event); } @Override public void invokeDefaultOnBackPressed() { super.onBackPressed(); } /** * Returns the name of the main component registered from JavaScript. * This is used to schedule rendering of the component. */ // @Override // protected String getMainComponentName() { // return moduleName; // } @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 public void onBackPressed() { if (mReactInstanceManager != null) { mReactInstanceManager.onBackPressed(); } else { super.onBackPressed(); } } @Override protected void onDestroy() { super.onDestroy(); if (mReactInstanceManager != null) { mReactInstanceManager.onHostDestroy(this); } if (mReactRootView != null) { mReactRootView.unmountReactApplication(); } } public boolean getUseDeveloperSupport() { return mReactInstanceManager != null && mDeveloperSupport; } }
2.直接初始化一個React Native項目
react-native init RNBearin
二.安裝完成後需要node_modules/文件夾加入到.gitignore文件裏面去