最詳細的Android原生APP中添加ReactNative 進行混合開發教程

背景

React Native出來已經一段時間了，相對來說也算穩定了，在很多的企業中都實際使用他們，混合開發已經是未來的一種趨勢，混合開發中使用的技術很多，不外乎Html5、JS框架通過一定的技術和原始交互，目前主流混合開發React Native、Cordova、APICloud、MUI、AppCan、Sencha Touch、jQuery Mobile等等（其他的小夥伴們自己收集），目前網上寫教程的人很多，但是React Native更新速度很快，根據他們的教程，中間會遇到各種問題，今天我和大家一起踩踩各種坑，讓小夥伴們快速集成到自己的APP中。後續持續更新，反饋發郵件[email protected]共同探討。

集成的小夥伴一定要注意圖片中標註和備註哦，不然有可能會走彎路哦

集成步驟

參考官方文檔->react native 文檔
本文使用開發環境 Android studio
注意最新的React Native支持的最新的SDK爲16（android4.1）
npm環境，小夥伴們自己安裝 nodeJS自己安裝，可以參考官方文檔安裝環境，有問題可以發[email protected]溝通

創建Android項目（已有項目跳過）

打開Android studio

14752189589833.jpg
輸入項目名稱，選擇項目目錄，點擊next

14752190447690.jpg

14752191238908.jpg

14752192158859.jpg

14752193112367.jpg

至此項目創建完成（需要注意的是最新的React Native支持最新SDK版本爲16 android4.1）

React Native集成到上面我們創建的ReactNativeAPPDemo中

參考Facebook react native文檔

進入項目根目錄，添加JS到項目中-點擊Android studio中的Terminal（如下圖）

14752200412681.jpg

分別執行一下語句

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

init 主要根據提醒生成package.json文件
install --save react react-native 安裝React 和React Native
curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig 下載.flowconfig文件
參考圖片

14752207192510.jpg

查看項目中有node_modules，說明react和react native 安裝完成

14752214758622.jpg

在項目根目錄添加.flowconfig

參考下圖

14752216108448.jpg

也可以手動創建在瀏覽器打開https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig網址複製內容創建文件

14752217925862.jpg

ReactNativeAppDemo配置相關內容

添加"start": "node node_modules/react-native/local-cli/cli.js start" 到package.json 文件下 scripts標籤修改前

14752220951994.jpg

修改後

14752221462812.jpg

添加index.android.js文件到項目中

14752222197635.jpg

 '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配置基本完成

App build.gradle配置
```
dependencies {
 ...
 compile "com.facebook.react:react-native:+" // From node_modules.
}
```
這裏注意不要使用maven中的，因爲我們使用的是我們本地node_modules中的，注意最新版本中支持的是23，appcompat-v7:23.0.1，暫時沒有試24的api

14752229775637.jpg

整個工程build.gradle配置
>

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

14752256546683.jpg

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

14752240537114.jpg

14752241070972.jpg

確定是下是最新的，例如確定是0.34.1而不是0.20.1，如果出現請檢查

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

添加native code

官方給出的

14752232872479.jpg

到時最新版本中提供了更加簡單的方式，沒錯就是繼承。

14752258065933.jpg

在這裏我們也需要自定義一個Application否則運行時會報錯，不信的小夥伴可以試一試

14752259787709.jpg

14752260351714.jpg

到此爲止，ReactNative 集成到已有項目中完成！！！迫不及待的運行試試吧！！

14752261248709.jpg

在Terminal中運行 npm start，看到下圖表示啓動成功

14752261852021.jpg

運行以後發現如下錯誤

14752468221176.jpg

react-native報錯：Could not get BatchedBridge, make sure your bundle is packaged correctly
莫緊張，這是因爲bundle沒有打包好。找不到編譯打包後的js文件。其實就是android studio默認的尋找js文件地址和react-native自己的工具編譯所使用的地址不同。

解決方法

方法一

進入項目，在android/app/src/main下新建assets目錄。執行以下命令

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

在項目根目錄下執行

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

把創建的apk安裝到android設備

方法二

進入項目，在android/app/src/main下新建assets目錄
啓動服務器

$>react-native start
$>react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res/

在assets文件夾下會生成index.android.bundle文件，把創建的apk文件安裝到android設備

方法三

進入項目，在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/"
  },

個人推薦使用方法三,方法三解決不了推薦方法二手動執行
修改剛剛的package.json文件

14752486039953.jpg

如果真機(模擬器)需要執行

adb reverse tcp:8081 tcp:8081

一定要確定連接網絡哦！！

14752520319630.jpg

14752520729313.jpg

開心的進行開發吧！

其他可能遇到的問題

ReactNative兼容64位Android手機

libgnustl_shared.so" is 32-bit instead of 64-bit類似錯誤

解決方法

在項目的根目錄的 gradle.properties 裏面添加一行代碼
android.useDeprecatedNdk=true.

在 build.gradle 文件裏添加以下代碼

android {
...
defaultConfig {
   ...
   ndk {
       abiFilters "armeabi-v7a", "x86"
   }

   packagingOptions {
       exclude "lib/arm64-v8a/librealm-jni.so"
   }
}
}

最後感謝

http://majing.io/questions/589
http://www.cnblogs.com/tony-yang-flutter/p/5864578.html
https://blog.yourtion.com/update-react-native-029-bug.html
http://stackoverflow.com/questions/38870710/error-could-not-get-batchedbridge-make-sure-your-bundle-is-packaged-properly/38874952
http://blog.csdn.net/b992379702b/article/details/52234479

Genymotion模擬器運行顯示沒有連接到developement server如下圖

Paste_Image.png

先檢查是否連接到網絡
點擊模擬器中Menu菜單彈出下面圖片，點擊Dev Settings

Paste_Image.png
點擊Debugging 下面的Debug Server host & port for device填寫地址和端口

Paste_Image.png

Paste_Image.png

上文中使用到的項目ReactNativeAPPDemo鏈接: https://pan.baidu.com/s/1i4GkeKt 密碼: vwym

最近小夥伴反饋0.39.0上面沒有ReactApplication接口，請看我的截圖有問題QQ聯繫我共同探討

我的項目中依然可以看到，是不是有的小夥伴gradle文件配置的問題，仔細檢查下，確實有問題的小夥伴，請加QQ私聊

Paste_Image.png

升級ReactNative

由於ReactNative 更新比較頻繁，有的時候我們的項目需求根據情況，需要升級到最新或者指定版本的ReactNative，下面給大家介紹下。

安裝git（如果安裝git請求跳過）

下載並安裝git
在命令行執行命令

npm install -g react-native-git-upgrade
react-native-git-upgrade
更新項目ReactNative依賴

通過命令：npm info react-native 查看ReactNative版本
npm install --save [email protected] 安裝指定版本，X.Y是npm info react-native 查看到的ReactNative版本
更新 react-native upgrade

發佈Demo 到github Demo 歡迎大家提問交流

ReactNativeAppDemo
提問

出處：http://www.jianshu.com/p/22aa14664cf9

最詳細的Android原生APP中添加ReactNative 進行混合開發教程

背景

集成的小夥伴一定要注意圖片中標註和備註哦，不然有可能會走彎路哦

集成步驟

創建Android項目（已有項目跳過）

React Native集成到上面我們創建的ReactNativeAPPDemo中

查看項目中有node_modules，說明react和react native 安裝完成

在項目根目錄添加.flowconfig

ReactNativeAppDemo配置相關內容

添加native code

解決方法

方法一

方法二

方法三

其他可能遇到的問題

ReactNative兼容64位Android手機

解決方法

Genymotion模擬器運行顯示沒有連接到developement server如下圖

升級ReactNative

發佈Demo 到github Demo 歡迎大家提問交流

PDManer [元數建模]-v4.9.0 發佈：一款簡單好用的數據庫建模平臺

使用neovim打造go ide(支持代碼跳轉, 代碼補全, 實時語法檢查)

cs01 CSS Syntax

挑戰程序設計競賽 2.3章習題 poj 3046 Ant Counting

[MASM拾遺]Offset僞指令

h30 HTML Layout Elements

瞭解顯卡

一款基於C#開發的通訊調試工具（支持Modbus RTU、MQTT調試）

Linux/Golang/glibC系統調用

cs04 CSS Measurement Units

android中handler和bundle有什麼區別和聯繫都是用來傳遞消息嗎都是信息的載體嗎

最詳細的Android原生APP中添加ReactNative 進行混合開發教程

Android Studio AIDL創建案例（解決自動生成java問題）

found libBaiduMapSDK_base_v4_x_x.so error

Flutter打包Android項目時28.0.3/core-lambda-stubs.jar問題

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結