參考官方文件->react native 文件
本文使用開發環境 Android studio
注意最新的react native支援的最新的SDK為16（android4.1）

建立Android專案（已有專案跳過）

1. 開啟Android studio
   
   
2. 輸入專案名稱，選擇專案目錄，點選next
   
   
   
   
   
   
   

至此專案建立完成（需要注意的是最新的React Native支援最新SDK版本為16 android4.1）

React Native整合到上面我們建立的ReactNativeAPPDemo中

參考Facebook react native文件

1. 進入專案根目錄，新增JS到專案中-點選Android studio中的Terminal（如下圖）
   
   

分別執行一下語句

  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

檢視專案中有node_modules，說明react和react native 安裝完成

在專案根目錄新增.flowconfig

參考下圖

ReactNativeAppDemo配置相關內容

1. 新增"start": "node node_modules/react-native/local-cli/cli.js start" 到package.json 檔案下 scripts標籤 修改前
   
   
   修改後
   
   

1. 新增index.android.js檔案到專案中
   

   
   

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

2. App build.gradle配置

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

   這裡注意不要使用maven中的，因為我們使用的是我們本地node_modules中的，注意最新版本中支援的是23，appcompat-v7:23.0.1，暫時沒有試24的api
   

   
   

1. 整個工程build.gradle配置
   >

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

1. 新增<uses-permission android:name="android.permission.INTERNET" />到AndroidManifest.xml:
2. 確定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

官方給出的

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

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

到此為止，ReactNative 整合到已有專案中完成！！！迫不及待的執行試試吧！！

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

執行以後發現如下錯誤

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檔案

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

adb reverse tcp:8081 tcp:8081

一定要確定連線網路哦！！

開心的進行開發吧！

其他可能遇到的問題

ReactNative相容64位Android手機

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

解決方法

1. 在專案的根目錄的 gradle.properties 裡面新增一行程式碼
   android.useDeprecatedNdk=true.

2. 在 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如下圖

1. 先檢查是否連線到網路
2. 點選模擬器中Menu選單彈出下面圖片，點選Dev Settings
   
   
3. 點選Debugging 下面的Debug Server host & port for device填寫地址和埠
   
   
   
   

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

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

升級ReactNative

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

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

   下載並安裝git

2. 在命令列執行命令

   npm install -g react-native-Git-upgrade
   react-native-git-upgrade

3. 更新專案ReactNative依賴

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

4. 更新 react-native upgrade