背景

React Native出來已經(jīng)一段時(shí)間了，相對(duì)來說也算穩(wěn)定了，在很多的企業(yè)中都實(shí)際使用他們，混合開發(fā)已經(jīng)是未來的一種趨勢(shì)，混合開發(fā)中使用的技術(shù)很多，不外乎Html5、JS框架通過一定的技術(shù)和原始交互，目前主流混合開發(fā)React Native、Cordova、APICloud、MUI、AppCan、Sencha Touch、jQuery Mobile等等(其他的小伙伴們自己收集)，目前網(wǎng)上寫教程的人很多，但是React Native更新速度很快，根據(jù)他們的教程，中間會(huì)遇到各種問題，今天我和大家一起踩踩各種坑，讓小伙伴們快速集成到自己的APP中。

集成的小伙伴一定要注意圖片中標(biāo)注和備注哦，不然有可能會(huì)走彎路哦

集成步驟

參考官方文檔->react native 文檔

本文使用開發(fā)環(huán)境 Android studio

注意***的React Native支持的***的SDK為16(android4.1)

npm環(huán)境，小伙伴們自己安裝 nodeJS自己安裝，可以參考官方文檔安裝環(huán)境，有問題可以發(fā)411437734@qq.com溝通

創(chuàng)建Android項(xiàng)目(已有項(xiàng)目跳過)

1.打開Android studio   

2.輸入項(xiàng)目名稱，選擇項(xiàng)目目錄，點(diǎn)擊next   

至此項(xiàng)目創(chuàng)建完成(需要注意的是***的React Native支持***SDK版本為16 android4.1)

React Native集成到上面我們創(chuàng)建的ReactNativeAPPDemo中

參考Facebook react native文檔

1.進(jìn)入項(xiàng)目根目錄，添加JS到項(xiàng)目中-點(diǎn)擊Android studio中的Terminal(如下圖)   

分別執(zhí)行一下語句

npm init 
npm install --save react react-native 
curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig  

init 主要根據(jù)提醒生成package.json文件

install --save react react-native 安裝React 和React Native

curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig 下載.flowconfig文件

參考圖片   

查看項(xiàng)目中有node_modules，說明react和react native 安裝完成   

在項(xiàng)目根目錄添加.flowconfig

參考下圖   

也可以手動(dòng)創(chuàng)建在瀏覽器打開https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig網(wǎng)址復(fù)制內(nèi)容創(chuàng)建文件   

ReactNativeAppDemo配置相關(guān)內(nèi)容

1.添加"start": "node node_modules/react-native/local-cli/cli.js start" 到package.json 文件下 scripts標(biāo)簽 修改前   

修改后   

2.添加index.android.js文件到項(xiàng)目中   

'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);  

至此React native配置基本完成

3.App build.gradle配置

dependencies { 
... 
compile "com.facebook.react:react-native:+" // From node_modules.}  

這里注意不要使用maven中的，因?yàn)槲覀兪褂玫氖俏覀儽镜豱ode_modules中的，注意***版本中支持的是23，appcompat-v7:23.0.1，暫時(shí)沒有試24的api   

整個(gè)工程build.gradle配置

allprojects { 
repositories { 
    ... 
    maven {         // All of React Native (JS, Android binaries) is installed from npm 
        url "$rootDir/node_modules/react-native/android" 
    } 
} 
... 
}    

添加<uses-permission android:name="android.permission.INTERNET" />到AndroidManifest.xml:

確定External Libraries   

確定是下是***的，例如確定是0.34.1而不是0.20.1，如果出現(xiàn)請(qǐng)檢查 

maven { 
           `url "$rootDir/../node_modules/react-native/android"`//地址是否正確 
       }  
修改url "$rootDir*/..*/node_modules/react-native/android"為url "$rootDir/node_modules/react-native/android"  

添加native code

官方給出的   

到時(shí)***版本中提供了更加簡(jiǎn)單的方式，沒錯(cuò)就是繼承。   

在這里我們也需要自定義一個(gè)Application否則 運(yùn)行時(shí)會(huì)報(bào)錯(cuò)，不信的小伙伴可以試一試   

到此為止，ReactNative 集成到已有項(xiàng)目中完成!!!迫不及待的運(yùn)行試試吧!!   

在Terminal中運(yùn)行 npm start，看到下圖表示啟動(dòng)成功   

運(yùn)行以后發(fā)現(xiàn)如下錯(cuò)誤   

react-native報(bào)錯(cuò)：Could not get BatchedBridge, make sure your bundle is packaged correctly

莫緊張，這是因?yàn)閎undle沒有打包好。找不到編譯打包后的js文件。其實(shí)就是android studio默認(rèn)的尋找js文件地址和react-native自己的工具編譯所使用的地址不同。

解決方法

方法一

進(jìn)入項(xiàng)目，在android/app/src/main下新建assets目錄。執(zhí)行以下命令

$> react-native start > /dev/null 2>&1 &   
$> curl "http://localhost:8081/index.android.bundle?platform=android" -o 
> "app/src/main/assets/index.android.bundle"  

在項(xiàng)目根目錄下執(zhí)行

<!--$> (cd android/ && ./gradlew assembleDebug)-->$> (cd 項(xiàng)目名稱/ && ./gradlew assembleDebug) 

把創(chuàng)建的apk安裝到android設(shè)備

方法二

進(jìn)入項(xiàng)目，在android/app/src/main下新建assets目錄

啟動(dòng)服務(wù)器

$>react-native start 
$>react-native bundle --platform android --dev false --entry-file index.android.js --bundl  

在assets文件夾下會(huì)生成index.android.bundle文件，把創(chuàng)建的apk文件安裝到android設(shè)備

方法三

進(jìn)入項(xiàng)目，在android/app/src/main下新建assets目錄

在package.json中配置下面代碼

"scripts": { 
    "start": "node node_modules/react-native/local-cli/cli.js start", 
    "bundle-android": "react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --sourcemap-output app/src/main/assets/index.android.map --assets-dest android/app/src/main/res/" 
  }, 

 個(gè)人推薦使用方法三,方法三解決不了推薦方法二 手動(dòng)執(zhí)行

修改剛剛的package.json文件  

如果真機(jī)(模擬器)需要執(zhí)行

adb reverse tcp:8081 tcp:8081 

一定要確定連接網(wǎng)絡(luò)哦!! 

開心的進(jìn)行開發(fā)吧!

其他可能遇到的問題

ReactNative兼容64位Android手機(jī)

libgnustl_shared.so" is 32-bit instead of 64-bit類似錯(cuò)誤

解決方法

1. 在項(xiàng)目的根目錄的 gradle.properties 里面添加一行android.useDeprecatedNdk=true.
2. 在 build.gradle 文件里添加以下代碼

 android { 
... 
defaultConfig { 
   ... 
   ndk { 
       abiFilters "armeabi-v7a", "x86" 
   } 
 
   packagingOptions { 
       exclude "lib/arm64-v8abrealm-jni.so" 
   } 
} 
}   

Genymotion模擬器運(yùn)行顯示沒有連接到developement server如下圖 

先檢查是否連接到網(wǎng)絡(luò)

點(diǎn)擊模擬器中Menu菜單彈出下面圖片，點(diǎn)擊Dev Settings 

4.點(diǎn)擊Debugging 下面的Debug Server host & port for device填寫地址和端口