最近一段時(shí)間比較忙，也沒時(shí)間梳理下自己的學(xué)習(xí)筆記单料，隔了好久也不知道要整理些什么出來扳躬，剛好最近在整理下React Native相關(guān)的東東，所以在此記錄下留作筆記使用糖儡。
（在這就不描述Android項(xiàng)目和RN項(xiàng)目環(huán)境如何搭建了伐坏。）
一、Android項(xiàng)目集成RN
新建普通Android項(xiàng)目
新建一個(gè)普通的Android項(xiàng)目即可握联，打開Android Studio->File->New->New Project...按步驟執(zhí)行即可桦沉。-
在項(xiàng)目根目錄下引入React Native模塊
在AS中的Terminal中輸入npm init,輸入一些項(xiàng)目的描述屬性(默認(rèn)一路回車也行)每瞒，為了生成·文件的項(xiàng)目描述，根據(jù)提示來填寫就好了,生成的json文件內(nèi)容大致如下：{ "name": "rnappdemo", "version": "1.0.0", "description": "test", "main": "index.js", "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "no" }, "repository": { "type": "git", "url": "no" }, "keywords": [ "no" ], "author": "liu", "license": "ISC", "dependencies": { "react": "^16.5.2", "react-native": "^0.55.4" } } -
引入rn的一些模塊文件
npm install --save react react-native會(huì)在根目錄生成一個(gè)node_modules文件夾纯露，存的是RN的一些模塊文件独泞，如果在這個(gè)過程中出現(xiàn)
require react@某.某.某版本, but none was installed,那么就使用命令
npm i -S react@某.某.某版本//此處為提示的版本號(hào).
注意：如何安裝React Native指定版本，命令如：npm install --save react-native@0.55.4苔埋，這里建議使用因?yàn)樽钚掳姹臼褂每赡軙?huì)出錯(cuò)懦砂，稍微比新版低個(gè)版本，我這里沒用最新版组橄，使用的是0.55.4荞膘。
如何查看當(dāng)前rn版本信息：npm info React-native -
引入.flowconfig文件
- 方法一：.flowconfig文件可以從facebook的github上復(fù)制，然后在工程的根目錄創(chuàng)建.flowconfig文件玉工，將其內(nèi)容復(fù)制進(jìn)去即可羽资。
- 方法二：在Terminal中執(zhí)行以下命令：
curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
接下來打開package.json文件，在scripts模塊下添加遵班，如上步驟2顯示屠升。
"start": "node node_modules/react-native/local-cli/cli.js start"-
在項(xiàng)目根目錄下的
build.gradle添加以下配置allprojects { repositories { jcenter() maven { url "https://maven.google.com" } maven { // All of React Native (JS, Android binaries) is installed from npm url "$rootDir/node_modules/react-native/android"http://此處目錄請額外注意 } } } -
在app下的
build.gradle->dependencies添加以下依賴：compile "com.facebook.react:react-native:+" // From node_modules.同時(shí)在android -> defaultConfig 中添加
ndk{ abiFilters "armeabi-v7a","x86"}
完整如下：defaultConfig { applicationId "com.liujc.rnappdemo" minSdkVersion 16 targetSdkVersion 27 versionCode 1 versionName "1.0" testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner" ndk{ abiFilters "armeabi-v7a","x86" } } -
在
AndroidManifest.xml清單文件中聲明網(wǎng)絡(luò)權(quán)限:<uses-permission android:name="android.permission.INTERNET" />如果需要訪問 DevSettingsActivity 界面（即開發(fā)者菜單），則還需要在
AndroidManifest.xml中聲明:<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
二狭郑、編寫RN代碼運(yùn)行到Android項(xiàng)目中
-
在根目錄下創(chuàng)建
index.android.js文件：'use strict'; import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, NativeModules, View, ToastAndroid, DeviceEventEmitter } from 'react-native'; let title = 'React Native界面'; class reactNative extends Component { /**加載完成*/ componentWillMount() { let result = NativeModules.MyNativeModule.Constant; console.log('原生端返回的常量值為：' + result); } /** * 原生調(diào)用RN */ componentDidMount() { DeviceEventEmitter.addListener('nativeCallRn',(msg)=>{ title = "React Native界面,收到數(shù)據(jù)：" + msg; ToastAndroid.show("發(fā)送成功", ToastAndroid.SHORT); }) } render() { return ( <View style={styles.container}> <Text style={styles.welcome} > {title} </Text> <Text style={styles.instructions}> To get started, edit index.android.js </Text> <Text style={styles.instructions}> Double tap R on your keyboard to reload,{'\n'} Shake or press menu button for dev menu </Text> <Text style={styles.welcome}> 我是RN界面! </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('reactNative', () => reactNative); -
在Terminal中執(zhí)行啟動(dòng)命令
npm run start或者yarn start//默認(rèn)啟動(dòng)端口為8081腹暖，后面會(huì)描述如何修改端口號(hào).
啟動(dòng)完成后出現(xiàn)如下界面：┌────────────────────────────────────────────── ────────────────────────────────┐ │ │ │ Running Metro Bundler on port 8081. │ │ │ │ Keep Metro running while developing on any JS projects. Feel free to │ │ close this tab and run your own Metro instance if you prefer. │ │ │ │ https://github.com/facebook/react-native │ │ │ └──────────────────────────────────────────────────────────────────────────────┘ Looking for JS files in E:\workspace\WsForRN\RNAppDemo\RNAppDemo Metro Bundler ready. Loading dependency graph, done.然后在瀏覽器中輸入
http://localhost:8081/index.android.bundle訪問沒有報(bào)錯(cuò)，則說明啟動(dòng)成功. -
在Application里面添加如下代碼：
public class AppApplication extends Application implements ReactApplication { private static AppApplication instance; @Override public void onCreate() { super.onCreate(); instance = this; SoLoader.init(this, false); } private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage() ); } }; /** * 獲取Application實(shí)例 */ public static AppApplication getInstance() { return instance; } @Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost; } } -
在對應(yīng)Activity中添加如下代碼：
public class MyRNActivity extends ReactActivity { @Override protected String getMainComponentName() { return "reactNative";//此處容器名要與index.android.js里面注冊的控件名一致 } } 記得把Application和對應(yīng)的Activity在AndroidManifest.xml中注冊使用翰萨。運(yùn)行APP即可加載RN界面脏答。
備注：設(shè)備要和服務(wù)端在同一局域網(wǎng)下調(diào)試，即鏈接同一WiFi或者設(shè)備鏈接電腦的代理亩鬼。
到此僅記錄Android原生集成RN項(xiàng)目的方法殖告，即初級技能，稍后整理下稍微升級點(diǎn)的技能雳锋，清單如下：
- Android原生與RN如何交互通信
- RN使用Android原生控件或自定義組件
- RN預(yù)加載實(shí)現(xiàn)
- React Native Linking與 Android原生頁面路由跳轉(zhuǎn)實(shí)現(xiàn)
- RN項(xiàng)目拆包和熱更新
