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

React Native在Android当中实践(一)——背景介绍

React Native在Android当中实践(二)——搭建开发环境

React Native在Android当中实践(三)——集成到Android项目当中

React Native在Android当中实践(四)——代码集成

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. 多数布局代码都是JSX,所有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的一篇文章写得很详细,我就不拾人牙慧了:React Native通信机制详解 « bang’s blog 。但这样设计也会带来一些问题,后面说。 6. 点按操作也被抽象成了一组组件(TouchableXXX),这种抽象方式是我在之前做类似工作中没有想到的。facebook还列出Native为什么和web「手感」不同的原因:实时的点按反馈和取消能力。React Native 这套相应机制设计得很完善,能像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 ,届时整个系统设计可能还会有很大的变化。 ######参考 www.zhihu.com/question/27… github.com/reactnative… www.lcode.org/category/re…

转载于:https://juejin.im/post/5bbd7139e51d450e8377b714

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/281941.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

完成登录与注册页面的前端

完成登录与注册页面的HTMLCSSJS,其中的输入项检查包括: 用户名6-12位 首字母不能是数字 只能包含字母和数字 密码6-12位 注册页两次密码是否一致 JS: function fnLogin() {var uSer document.getElementById("user");var pAss do…

mysql505复位密码_mysql5 如何复位根用户密码[官方文档]

如何复位根用户密码如果你从未为MySQL设置根用户密码,服务器在以根用户身份进行连接时不需要密码。但是,建议你为每个账户设置密码如果你以前设置了根用户密码,但却忘记了该密码,可设置新的密码。下述步骤是针对Windows平台的。在…

WPF效果第二百零一篇之实现合并单元格

早一段时间又一次出差青海省西宁市;回来又是总结又是各种琐事,也没顾得上去分享点东西;大周末的就在家分享一下,这二天再次基于ListBox实现的合并单元格的效果:1、ListBox嵌套ListBox的前台布局:<ListBox ItemsSource"{Binding LCPListData}" x:Name"Manufac…

转载 maven 详解 http://www.cnblogs.com/binyue/p/4729134.html

--声明规范 <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <!--声…

ASP.NET Core中使用EasyCaching作为缓存抽象层

简介做后端开发&#xff0c;缓存应该是天天在用&#xff0c;很多时候我们的做法是写个帮助类&#xff0c;然后用到的时候调用一下。这种只适合简单层次的应用&#xff1b;一旦涉及到接口实现调整之类的&#xff0c;这种强耦合的做法很不合适。有些其他的功能又要去重复造轮子。…

mysql qps如何查看_mysql状态查看 QPS/TPS/缓存命中率查看

运行中的mysql状态查看对正在运行的mysql进行监控&#xff0c;其中一个方式就是查看mysql运行状态。(1)QPS(每秒Query量)QPS Questions(or Queries) / uptimemysql > show global status like Question%;mysql > show global status like uptime%;(2)TPS(每秒事务量…

visual studio开启多核编译方法

先按http://blog.csdn.net/acaiwlj/article/details/50240625的方法进行了VS多线程的启动。 原本以为按以下步骤设置就OK了&#xff0c;但是编译中无意间发些了一个warning&#xff1a;“/Gm”与多处理不兼容&#xff1b;忽略 /MP 开关&#xff01;&#xff01;&#xff01;&am…

聊聊storm nimbus的LeaderElector

为什么80%的码农都做不了架构师&#xff1f;>>> 序 本文主要研究一下storm nimbus的LeaderElector Nimbus org/apache/storm/daemon/nimbus/Nimbus.java public static void main(String[] args) throws Exception {Utils.setupDefaultUncaughtExceptionHandler();…

Android框架式编程之BufferKnife

BufferKnife作为框架式编程的重要组成部分&#xff0c;使用BufferKnife能够极大的精简View层面的代码量&#xff0c;并为MVP/MVC方式提供辅助。 一、配置 compile com.jakewharton:butterknife:(insert latest version) annotationProcessor com.jakewharton:butterknife-compi…

如果我去深圳,你会见我吗

▲图/ 深圳夜景初次见易小姐&#xff0c;还是21年的春节回老家的时候。想来20年因为疫情没有回家&#xff0c;家母几次三番电话里头表达的思念以及建议一些不靠谱的回家计划&#xff0c;着实有些不忍&#xff0c;确实有似“儿行千里母担忧”之理&#xff0c;索性拿着年假和加班…

CodeForces - 1059D(二分+误差)

链接&#xff1a;CodeForces - 1059D 题意&#xff1a;给出笛卡尔坐标系上 n 个点&#xff0c;求与 x 轴相切且覆盖了所有给出点的圆的最小半径。 题解&#xff1a;二分半径即可。判断&#xff1a;假设当前二分到的半径是 R &#xff0c;因为要和 x 轴相切&#xff0c;所以圆心…

pureref 平移用不了_关于参考图管理神器 PureRef 的一些快捷键

PureRef 的一些快捷键 软件下载&#xff1a;点击这里控制(配合左键)窗口内鼠标左键     框选窗口边鼠标左键     调整窗口大小鼠标中键 或 按住Alt     移动画布鼠标滚轮 或 按住Z     缩放画布按住S     查看目标位置颜色信息(可复制16进制颜色…

Windows 10 版本信息

Windows 10 版本信息 原文 https://technet.microsoft.com/zh-cn/windows/release-info Windows 10 版本信息 Microsoft 已更新其服务模型。 半年频道每年发布两次功能更新&#xff0c;时间大概在 3 月和 9 月&#xff0c;每个版本的服务时间线为 18 个月。 从 Windows 10 版本…

开源轻量的 .NET 监控工具 - 看门狗

你好&#xff0c;这里是 Dotnet 工具箱&#xff0c;定期分享 Dotnet 有趣&#xff0c;实用的工具或组件&#xff0c;希望对您有用&#xff01;简介WatchDog 是一个使用 C# 开发的开源的轻量监控工具&#xff0c;它可以记录和查看 ASP.Net Core Web 和 WebApi 的实时消息、事件、…

python读取oracle数据库性能_用python对oracle进行简单性能测试

一、概述dba在工作中避不开的两个问题&#xff0c;sql使用绑定变量到底会有多少的性能提升&#xff1f;数据库的审计功能如果打开对数据库的性能会产生多大的影响&#xff1f;最近恰好都碰到了&#xff0c;索性做个实验。sql使用绑定变量对性能的影响开通数据库审计功能对性能的…

BZOJ 3231: [Sdoi2008]递归数列 (JZYZOJ 1353) 矩阵快速幂

http://www.lydsy.com/JudgeOnline/problem.php?id3231和斐波那契一个道理在最后加一个求和即可1 #include<cstdio>2 #include<cstring>3 #include<iostream>4 //using namespace std;5 const int maxn10010;6 const double eps1e-8;7 long long modn;8 lon…

马斯克的火箭上天了,SpaceX开源项目也登上了热榜!

python知识手册SpaceX于美国东部时间5月30日下午3&#xff1a;22分将两位美国宇航员送往国际空间站&#xff0c;虽然这只是Demo任务&#xff0c;但SpaceX已经以其卓越工程优势、低廉的发射成本赢得了全球航天产业的信赖。同时也是除美俄中这些航天国家队以外&#xff0c;唯一独…

EasyMock学习笔记

目前在接触平台侧的开发&#xff0c;发现平台侧的东西和以前javacard开发很不一样&#xff0c;看来以后要学的东西还有很多很多。今天接触了下EasyMock。 Mock 方法是单元测试中常见的一种技术&#xff0c;它的主要作用是模拟一些在应用中不容易构造或者比较复杂的对象&#xf…

app启动广告页的实现,解决了广告图片要实时更新的问题

网上很多的实现方法很多都是显示第一次的缓存的图片&#xff0c;这样就造成后台更新广告图片App不能实时展示的问题。 我的具体实现思路是&#xff1a; 1.启动时先获取启动页的图片全屏展示。 2.设计一个等待时间&#xff0c;如果超过等待时间还没拿到图片就把获取的启动页去掉…

vue中点击插入html_Vue中插入HTML代码的方法

我们需要吧Hello World插入到My name is Pjee应该如何做&#xff1f;一、使用v-htmlv-html:更新元素的 innerHTMLconst text Hello World>My name is Pjee注意&#xff1a;你的站点上动态渲染的任意 HTML 可能会非常危险&#xff0c;因为它很容易导致 XSS 攻击。请只对可信…