React Native 集成流水帐

  1. 安装环境: Ubuntu-LTS-12.04
  2. http://facebook.github.io/react-native/ React-Native官网。
  3. http://facebook.github.io/react-native/docs/getting-started.html 该教程并不是教你如何集成React Native,只是先教你搭建一个React Native的示例尝尝鲜。
  4. 需要安装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)。
  5. 配置Android开发环境和环境变量,follow教程即可,留意需要Android 6.0 SDK和Android SDK Build-Tools 23.0.1
  6. Watchman的安装可选,建议安装。
  7. 先启动一个Android虚拟机(最好版本>=5.0),实机也可以,不过到时候连起来麻烦。
  8. 使用npm安装react-native-cli: npm install -g react-native-cli, 如果觉得慢的话,可以用淘宝的npm源: https://npm.taobao.org/(里面有Node.js 镜像地址)。参考自: http://www.jianshu.com/p/cd2a8c5ee1c7
  9. react-native-cli安装完毕就可以运行 “Testing your React Native Installation ” 这一章的命令了。
  10. 随后在AwesomeProject目录中运行npm start来运行起develop server,这样运行起来的app才能取到js bundle。
  11. 该例子传输的js是index.android.js,可以修改其内容,然后在设备上双击”R”键来刷新修改后的内容。
  12. http://facebook.github.io/react-native/docs/integration-with-existing-apps.html 该教程才是关于集成React Native到当前项目的。
  13. 还是要保证Nodejs npm都安装就绪。然后按照流程将react native库下载至Project目录下
  14. 在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。
  15. 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://blog.csdn.net/dq1005/article/details/51505017
  16. 因为当前使用的虚拟机碰巧是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

  17. 另外,React-Native增加的方法数有3W+,一般集成后都会突破65536的方法数限制,因此一般会需要开启multi-dex或者使用插件化方案。

  18. 到这一步,基本就集成完毕了,如果要进行简单测试,可以在project目录下运行npm start, 教程的示例code(MyReactActivity)就可以从develop server提取index.android.js做展示。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值