React Native 集成流水帐

安装环境: Ubuntu-LTS-12.04
http://facebook.github.io/react-native/ React-Native官网。
http://facebook.github.io/react-native/docs/getting-started.html 该教程并不是教你如何集成React Native，只是先教你搭建一个React Native的示例尝尝鲜。
需要安装Nodejs和npm(Nodejs的一个包管理下载器)，教程给的不靠谱，ubuntu下会显示包找不到等问题，建议直接到Nodejs和npm的官方网站进行下载安装(Nodejs >= 6.0,npm >=3.8.6)。安装完毕建议替换/usr/bin/下的node和npm的软链接(ubuntu可能预置了老版本的Nodejs)，保证在命令行下调用的是下载的最新的Nodejs和npm(node -v,npm -v)。
配置Android开发环境和环境变量，follow教程即可，留意需要Android 6.0 SDK和Android SDK Build-Tools 23.0.1。
Watchman的安装可选，建议安装。
先启动一个Android虚拟机(最好版本>=5.0),实机也可以，不过到时候连起来麻烦。
使用npm安装react-native-cli: npm install -g react-native-cli,如果觉得慢的话，可以用淘宝的npm源: https://npm.taobao.org/(里面有Node.js 镜像地址)。参考自: http://www.jianshu.com/p/cd2a8c5ee1c7
react-native-cli安装完毕就可以运行 “Testing your React Native Installation ” 这一章的命令了。
随后在AwesomeProject目录中运行npm start来运行起develop server，这样运行起来的app才能取到js bundle。
该例子传输的js是index.android.js，可以修改其内容，然后在设备上双击”R”键来刷新修改后的内容。
http://facebook.github.io/react-native/docs/integration-with-existing-apps.html 该教程才是关于集成React Native到当前项目的。
还是要保证Nodejs npm都安装就绪。然后按照流程将react native库下载至Project目录下
在build.gradle中添加maven本地仓库时要注意，保证“$rootDir/../node_modules/react-native/android”确实是你下载的react native的目录，我这里就修改为了$rootDir/node_modules/react-native/android，如果你在gradle sync的时候发现在从远端下载react-native(MavenCentral的是旧版 0.20.0,而通过npm下载的应该是0.38)，那就说明url对应的目录不对，在这里没有找到之前通过npm下载安装的最新版React-Native。
React-Native要求minSDKVersion=16，这里遇到一个问题，编译时报错:
```
.../app/build/intermediates/exploded-   aar/com.android.support/appcompat-v7/23.0.1/res/values-v23/values-v23.xml  
Error:Error retrieving parent for item: No resource found that matches the given name 'android:TextAppearance.Material.Widget.Button.Inverse'.  
Error:Error retrieving parent for item: No resource found that matches the given name 'android:Widget.Material.Button.Colored'.
```
- RootCause应该是React-Native引用了AppCompat-v7/23的内容(分析React Native使用的BUCK文件可以发现)，而当前编译使用的SDK版本不是23,导致找不到需要的内容，解决的途径是将ComplieSDKVersion调整为23(因为React-Native需要AppCompat-v7/23，因此不能将采用将23移除的方法)。
- 上面解决方案的副作用是之前使用apache网络库的地方找不到库，因为在api 23中，不提供org.apache.http.*(只保留几个类),解决方法: buildGradle的android{}中添加useLibrary ‘org.apache.http.legacy’。 http://www.jb51.cc/article/p-grglpclh-nx.html

因为当前使用的虚拟机碰巧是x86_64，在运行React-Native时会Crash: /data/data/com.hfox.lovesquare/lib-main/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://blog.csdn.net/ssksuke/article/details/52611689

另外，React-Native增加的方法数有3W+，一般集成后都会突破65536的方法数限制，因此一般会需要开启multi-dex或者使用插件化方案。
到这一步，基本就集成完毕了，如果要进行简单测试，可以在project目录下运行npm start,教程的示例code(MyReactActivity)就可以从develop server提取index.android.js做展示。

原文链接：https://www.f2er.com/react/305366.html

React Native 集成流水帐

猜你在找的React相关文章