React Native在Android当中实践(五)——常见问题

常见问题

若出现libgnustl_shared.so" is 32-bit instead of 64-bit类似错误

这个问题是由于ReactNative兼容64位Android手机导致的。 解决办法: 1.在项目的根目录的 gradle.properties 里面添加一行代码 android.useDeprecatedNdk=true. 2.在 build.gradle 文件里添加以下代码

android {
    defaultConfig {
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
        packagingOptions {
            exclude "lib/arm64-v8a/librealm-jni.so"
        }
    }
}
若出现react-native run-android Android project not found

出现这个问题主要是因为android项目的目录结构跟react-native支持的目录结构不一致导致的。 提示:当然了你也可以运行“react-native upgrade”,该命令运行之后你会发现你的android项目的目录结构变化了。 之后 在运行react-native run-android即可。

若出现Could not get BatchedBridge, make sure your bundle is packaged correctly

这是因为bundle没有打包好。找不到编译打包后的js文件。其实就是android studio默认的寻找js文件地址和react-native自己的工具编译所使用的地址不同。

若出现Could not connect to development server

首先 我们先翻译一下 连接不到开发的服务器。 请按照以下的步骤来修复此问题: 确保包服务器在运行 确保你的设备或者模拟器连接着电脑,并且手机打开了USB调试模式,然后在cmd中运行adb devices来查看已经连接好的设备列表 确保飞行模式是关闭的 如果是使用真机来开发,输入 adb reverse tcp:8081 tcp:8081来检查设备 输入IP:8081(这个大家都会) 解决办法: 1、首先检查包服务器是否运行正常。 在项目文件夹下输入react-native start或者npm start均可开启服务器,但是我们需要在PC端确认包服务器是否运行正常。检查网址为:http://localhost:8081/index.android.bundle?platform=android (1)说说我遇到的问题,开启包服务器之后,cmd中显示如下:

出现React packager ready就走不动了。 当我看开http://localhost:8081/index.android.bundle?platform=android网址 时,没有正常显示,但是也没 有显示“该网页无法访问”,只是一直在转圈圈刷新网页,就是打不开。 包服务器中使用到了node,所以应该和node版本和配置有一定的关系。所以我就卸掉 node,重新安装了最新版本的node,之后包服务器打开,网页可以正常访问,如下所示:

2、检查硬件连接,以及使用adb devices来查看是否连接成功。

3、飞行模式关闭

4、在cmd中输入 adb reverse tcp:8081 tcp:8081,结果如下:

个人认为解决办法如下: 手机-设置-应用程序-开发-usb调试打开再关闭一次 重启手机,usb调试打开再关闭一次 在cmd下Try "adb kill-server" and then "adb start-server" 本人测试机为android 5.0+系统,使用第二种方法解决问题。结果如下:

5、摇一摇手机选择Dev Settings 输入IP:8081。

Make sure your bundle is packaged correctly or your're running a packager server

出现这个问题是由于

index.android.bundle是用来调用原生控件的js脚本,每次当改变了 index.android.js,都需要使用上面的代码片段,来及时的更新index.android.bundle,然后打包才可以把新的index.android.js应用上,所以当没有index.android.bundle文件时,React-Native 项目是无法运行的。

解决办法是

第一步:在Android/app/src/main目录下创建一个空的assets文件夹(若已经存在请忽略) 出现这个问题是由于

index.android.bundle是用来调用原生控件的js脚本,每次当改变了 index.android.js,都需要使用上面的代码片段,来及时的更新index.android.bundle,然后打包才可以把新的index.android.js应用上,所以当没有index.android.bundle文件时,React-Native 项目是无法运行的。

解决办法是

第一步:在Android/app/src/main目录下创建一个空的assets文件夹(若已经存在请忽略)

第二步:在Android Studio的Terminal进入项目根目录执行下面代码:

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和index.android.bundle.meta两个文件

如果已经有了资源文件,但是依旧有以上提示,那么对于真机来说摇晃手机会出现一些界面

选择最后一个

进入如下界面

输入本机的ip地址(注意手机和电脑在一个局域网)

别忘了加上端口号8081 如图

确认之后返回然后摇动打开调试页面选择

重新加载之后,就会出现我们期盼已久的“Hello,World”

React Native的开发者模式

会发现顶部有这样的一条

这是正在从网络加载相关内容,当我们修改的时候,内容也会有相应的修改。但是如果网络状况不太好的时候,想必会对我们的用户体验造成不小的影响。

写在最后

从我个人用 React Native 开发 APP 的体验来看,React Native 适合 C/S 结构、业务型的 APP 或其中的模块,对于偏重底层技术的比如工具类 APP (或者模块),我还没有使用 RN 尝试过,不过想必显然是不太适合的。总的来说,一个对于底层技术依赖不多,业务型,尤其是业务变动频繁的应用或模块适合 RN 开发,而且一次开发,基本可以完全重用于两个平台,重要的是可以热更新来应对业务逻辑更新频繁、更新要求快、迅速修复线上 bug 等需求场景,目前看,RN 的热更新并没有被 Apple 封杀。

  1. 无需编译,我在第一次编译了ipa装好以后,就再也没更新过app,只要更新云端的js代码,reload一下,整个界面就全变了。
  2. 多数布局代码都是<u>JSX</u>,所有Native组件都是标签化的,这对于前端程序员来说,降低了不少学习成本,也大大减少了代码量。不信你可以看看JSX编译后的代码。
  3. 复用React系统,也减少了一定学习和开发成本,更重要的是利用了React里面的分层和diff机制。js层传给Native层的是一个diff后的json,然后由Native将这个数据映射成真正的布局视图。
  4. css-layout也是点睛之笔,前端可以继续用熟悉的类css方式来编写布局,通过这个工具转换成constrain布局。
  5. 系统只有js-objc的单向调用,就是把原生UI组件的方法通过javascritcore或者webview(低版本iOS)映射到js中来,整个调用过程是异步的,这样的设计令React native可以让js运行在桌面chrome中,通过websocket连接Native code和桌面chrome,极大地方便了调试。对其中的机制Bang的一篇文章写得很详细,我就不拾人牙慧了:<u>React Native通信机制详解 « bang’s blog</u> 。但这样设计也会带来一些问题,后面说。
  6. 点按操作也被抽象成了一组组件(TouchableXXX),这种抽象方式是我在之前做类似工作中没有想到的。facebook还列出Native为什么和web「手感」不同的原因:实时的点按反馈和取消能力。<u>React Native</u> 这套相应机制设计得很完善,能像Native code那样控制整个点按操作的所有过程。
  7. Debug相当方便!修改了js以后,通过内建的nodejs watcher编译成bundle,在模拟器里面按cmd+r就可以看到效果。而且按cmd+d,可以打开一个chrome窗口,所有的js都移到了chrome里面运行,所以什么断点单步打调用栈,都不在话下。

上面的既是特点也是优点,下面说说缺点,或者应该说:「仍然遗留的问题」,在我看来,这个方案已经超越了Hybird方案。

  1. 系统仍然(不得不)依赖原生组件暴露出来的组件和方法。举两个例子,ScrollView这个组件,在Native层是有大量事件的,scrollViewWillBeginDragging, scrollViewWillEndDragging,scrollViewDidEndDragging等等,这些事件在现有的版本都没有暴露,基本上做不了组件联动效果。另外,这个版本中有大量组件是iOS only的:ActivityIndicatorIOS、DatePickerIOS、NavigatorIOS、PickerIOS、SliderIOS、SwitchIOS、TabBarIOS、AlertIOS、AppStateIOS、LinkingIOS、PushNotificationIOS、StatusBarIOS、VibrationIOS,反过来看,剩余的都是一些抽象程度极强的基本组件。这样,用户必须在不同的平台下写两套代码,而且所有能力仍然强烈依赖 React native 开发人员暴露的接口。
  2. 由于最外层是React,初次学习成本高,不像往常的Hybird方案,只要多学几个JS API就可以开始干活了。当然,React的确让后续开发变得简单了一些,这么一套外来的(基于iOS)、残缺不全的(css-layout)在React的包装下,的确显得不那么面目可憎了。 另外,React Native仍然很不完善。文档还不全,我基本上是看着他的示例代码完成的demo,集成到已有app的文档也是今天才出来。按照官方的说法,Android版本要到半年后才发布:Blog | React ,届时整个系统设计可能还会有很大的变化。
参考

https://www.zhihu.com/question/27852694 https://github.com/reactnativecn/react-native-guide http://www.lcode.org/category/react-native-zong/react-native/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏极乐技术社区

微信小程序跳坑指南系列《一》:新坑30枚

1、小程序名称可以由中文、数字、英文。长度在3-20个字符之间,一个中文字等于2个字符。 2、小程序名称不得与公众平台已有的订阅号、服务号重复。如提示重名,请更...

268100
来自专栏地方网络工作室的专栏

打造前端MAC工作站(四)配置 Atom 编辑器

打造前端MAC工作站(四)配置 Atom 编辑器 前言 前端工程师可选择的编辑器主要有 Atom、Sublime Text3、VS Code,三者风格差不多,你...

37160
来自专栏java一日一条

一个简单粗暴的前后端分离方案

刚刚参加完一个项目,背景:后端是用java,后端服务已经开发的差不多了,现在要通过web的方式对外提供服务,也就是B/S架构。后端专注做业务逻辑,不想...

27610
来自专栏Coco的专栏

清除页面广告?身为前端,自己做一款简易的chrome扩展吧

21550
来自专栏DeveWork

纯代码修改WordPress 默认 Gravatar 头像的方法

默认地,在 WordPress 后台的- 设置 - 讨论 下面可以设置默认的 Gravatar 头像,但是 WordPress 自带的可供选择的那几个实在是不得...

23070
来自专栏smy

ckplayer 如何在PC上完美支持 m3u8播放

使用过ckplayer的同学都知道,相对jwplayer等,它非常的容易配置和使用。功能也是基本满足我们的需求的。 一般情况我们都使用普通的视频格式比如mp4,...

69460
来自专栏程序你好

三分钟让你了解什么是Web开发?

10130
来自专栏专业duilib使用+业余界面开发

duilib的xml预览工具duilibpreview

61640
来自专栏魏艾斯博客www.vpsss.net

宝塔 Linux 面板发布 3.6 版本

37340
来自专栏较真的前端

关于如何做一个“优秀网站”的清单——规范篇

24670

扫码关注云+社区

领取腾讯云代金券