欧美中文国产,精品国产视频久久久久

背景

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中。后續(xù)持續(xù)更新，反饋發(fā)郵件411437734@qq.com共同探討。

集成的小伙伴一定要注意圖片中標(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)目跳過）

打開Android studio

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

14752190447690.jpg

14752191238908.jpg

14752192158859.jpg

14752193112367.jpg

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

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

參考Facebook react native文檔

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

14752200412681.jpg

分別執(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文件
參考圖片

14752207192510.jpg

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

14752214758622.jpg

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

參考下圖

14752216108448.jpg

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

14752217925862.jpg

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

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

14752220951994.jpg

修改后

14752221462812.jpg

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

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中的，因?yàn)槲覀兪褂玫氖俏覀儽镜豱ode_modules中的，注意最新版本中支持的是23，appcompat-v7:23.0.1，暫時(shí)沒有試24的api

14752229775637.jpg

整個(gè)工程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，如果出現(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

官方給出的

14752232872479.jpg

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

14752258065933.jpg

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

14752259787709.jpg

14752260351714.jpg

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

14752261248709.jpg

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

14752261852021.jpg

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

14752468221176.jpg

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 --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res/

在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文件

14752486039953.jpg

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

adb reverse tcp:8081 tcp:8081

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

14752520319630.jpg

14752520729313.jpg

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

其他可能遇到的問題

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

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

解決方法

在項(xiàng)目的根目錄的 gradle.properties 里面添加一行代碼

在 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模擬器運(yùn)行顯示沒有連接到developement server如下圖

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/1018012-afeaad419ff40114.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

1. 先檢查是否連接到網(wǎng)絡(luò)
2. 點(diǎn)擊模擬器中Menu菜單彈出下面圖片，點(diǎn)擊Dev Settings
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/1018012-024b1022595244ee.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
3. 點(diǎn)擊Debugging 下面的`Debug Server host & port for device`填寫地址和端口
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/1018012-e2bce20ef25911b9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/1018012-4008a5d1c3b7f4ec.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



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


最近小伙伴反饋0.39.0上面沒有ReactApplication接口，請(qǐng)看我的截圖有問題QQ聯(lián)系我共同探討
>我的項(xiàng)目中依然可以看到，是不是有的小伙伴gradle文件配置的問題，仔細(xì)檢查下，確實(shí)有問題的小伙伴，請(qǐng)加QQ私聊
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/1018012-d1fbebf0e6df6f66.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



###### 升級(jí)ReactNative
> 由于ReactNative 更新比較頻繁，有的時(shí)候我們的項(xiàng)目需求根據(jù)情況，需要升級(jí)到最新或者指定版本的ReactNative，下面給大家介紹下。


1. 安裝git（如果安裝git請(qǐng)求跳過）
    > 下載并安裝[git](https://git-scm.com/downloads)
2. 在命令行執(zhí)行命令
    > npm install -g react-native-git-upgrade
    > react-native-git-upgrade
3. 更新項(xiàng)目ReactNative依賴
    > 通過命令：npm info react-native 查看ReactNative版本
    > npm install --save react-native@X.Y 安裝指定版本，X.Y是npm info react-native 查看到的ReactNative版本
4. 更新 react-native upgrade

### 發(fā)布Demo 到github Demo  歡迎大家提問交流
  > [ReactNativeAppDemo](https://github.com/zdl411437734/ReactNativeAppDemo)
> [提問](https://github.com/zdl411437734/ReactNativeAppDemo/issues)

關(guān)注公眾號(hào)獲取更多內(nèi)容和反饋溝通
![Paste_Image.png -w200](http://upload-images.jianshu.io/upload_images/1018012-c8bfc8d8d233e9eb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

>轉(zhuǎn)載請(qǐng)注明出處：http://www.itdecent.cn/p/22aa14664cf9

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

史上最詳細(xì)的Android原生APP中添加ReactNative 進(jìn)行混合開發(fā)教程

史上最詳細(xì)的Android原生APP中添加ReactNative 進(jìn)行混合開發(fā)教程

背景

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

集成步驟

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

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

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

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

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

添加native code

解決方法

方法一

方法二

方法三

其他可能遇到的問題

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

解決方法

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

史上最詳細(xì)的Android原生APP中添加ReactNative 進(jìn)行混合開發(fā)教程

背景

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

集成步驟

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

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

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

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

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

添加native code

解決方法

方法一

方法二

方法三

其他可能遇到的問題

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

解決方法

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

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

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