React native开发中常见的错误

React Native环境搭建请移步:react native环境搭建

这里说说React native创建完成之后,运行中出现的常见问题,

 

问题1:

Java.lang.RuntimeException: SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.

 

这个是原因是工程找不到我们的Android SDK。

解决方法:在工程的根目录下的android文件下新建一个local.properties的文件(我们可以直接拷贝Android项目的local.properties的文件)。

 

问题2:

A problem occurred configuring project ':app'.>failed to find Build Tools revision 23.0.1

这个是因为Build Tools revision 23.0.1和我们的sdk里面的版本不一致导致的。

解决方法:这里注意build.gradle和gradle中gradle-wrapper.properties的对应关系。

3,Could not install the app on the device, read the error above for details.

这个是因为未找到运行的设备

解决方法:注意在运行命令:react-native run-android之前一定要确保手机已经连接上电脑。

4,com.android.ddmlib.InstallException: Failed to establish session

这是小米手机调试的问题,我之前用魅族就没这问题

解决方法:小米手机设置里-------开发者选项---------启用MIUI优化关闭

其他问题补充:

 

Q:RN所支持的最低iOS和Android版本?

A:Android >= 4.1 (API 16)

iOS >= 7.0

 

Q:RN和cordova/phonegap是一个东西吗?

A:不一样。RN不是一个webview(但包含了webview组件),不能直接复用web页面代码。RN的性能接近原生,超过cordova/phonegap。

 

 

Q:可以使用现有的js库吗?

A:由于RN理论上更接近nodejs的运行环境,所以对nodejs的库兼容更好一些。浏览器端的js库,涉及到DOM、BOM、CSS等功能的模块无法使用,因为RN的环境中没有这些东西

 

 

Q:如何升级RN版本?

A:请用编辑器打开项目目录中的package.json,找到类似下面的一行配置

"react-native": "0.31.0"

 

 

Q:应该使用什么IDE开发?

A:虽然常用的JS编辑器很多,但由于RN大量使用jsx和es6语法,目前只有sublime text(通过插件)和webstorm(10以上版本)提供了良好的支持。笔者推荐webstorm,因为它有更完善的语法提示和补全。另外虽然主要的业务逻辑是使用js开发,但仍然要依赖于原生的编译/调试环境,所以你还需要同时运行Xcode(iOS)或Android Studio(android)等。


 

Q:如何开启调试功能?

A:点击iOS模拟器顶部的Hardware菜单,选择Shake Gesture(对应真机摇一摇),会自动弹出如下图的菜单。

安卓模拟器则是点击菜单键,真机上没有菜单键的,摇一摇即可。

选择Debug in Chrome即会启动Chrome作为运行和调试环境(注意此时JS引擎为Chrome的V8,与iOS真机的javascriptCore引擎存在一些差异)。选择Inspect Element即可以像调试网页元素一样查看布局元素的样式,但比较简陋。React Devtools插件可装可不装,它只用来查看布局,不影响调试,且在目前的版本(>0.13)中还无法正常加载。


 

Q:使用ListView时报错:Sticky header index 0 was outside the range {...}

A:看起来是个数组越界错误,但多数情况下是由于ListView的子组件渲染错误(如套数据时没有检查undefined等)引起,而非ListView本身的问题。


 

Q:在使用Navigator的同时使用ListView或ScrollView,后两者的头部会多出一些空间。

A:将automaticallyAdjustContentInsets属性设为{false}.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ReactNative可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS应用就是基于它开发的。 React Native的原理是在JavaScriptReact抽象操作系统原生的UI组件,代替DOM元素来渲染,比如以取代,以替代等。 在幕后,React Native在主线程之外,在另一个背景线程里运行JavaScript引擎,两个线程之间通过一批量化的async消息协议来通信(有一个专门的React插件)。 UI方面React Native提供跨平台的类似Flexbox的布局系统,还支持CSS子集。可以用JSX或者普通JavaScript语言,还有CoffeeScript和TypeScript来开发。有评论说,React的UI层模型要比UIKit好很多。 更好的是,由于基于Web技术,开发起来可以像在浏览器里那样随时在仿真程序查看应用运行情况,刷新一下就行,无需编译,爽吧。 React Native比起标准Web开发或原生开发能够带来的三大好处: 1、手势识别:基于Web技术(HTML5/JavaScript)构建的移动应用经常被抱怨缺乏及时响应。而基于原生UI的React Native能避免这些问题从而实现实时响应。 2、原生组件:使用HTML5/JavaScript实现的组件比起原生组件总是让人感觉差一截,而React Native由于采用了原生UI组件自然没有此问题。 3、样式和布局:iOS、Android和基于Web的应用各自有不同的样式和布局机制。React Native通过一个基于FlexBox的布局引擎在所有移动平台上实现了一致的跨平台样式和布局方案。 ReactNative移动开发工具 更新日志: v0.64.1 此修补程序版本专门针对解决Xcode 12.5的iOS构建问题。 除了将您的版本从0.64.0升级到0.64.1之外,请检查您的podfile.lock并确保Flipper的版本为0.75或更高,并且Flipper-Folly的版本为2.5.3或更高;如果没有,请将此行添加到您的podfile(或修改它,如果您已经拥有的话): use_flipper!('Flipper' => '0.75.1', 'Flipper-Folly' => '2.5.3', 'Flipper-RSocket' => '1.3.1') 之后,进行所有经典的必要清理(node_modules,缓存,pod文件夹等)(react-native-clean-project是您的盟友),然后进行yarn install一次pod install --repo-update(如果pod安装由于Flipper软件包的错误而失败,只需删除podfile.lock的相关行,然后再次运行pod install)。 随Xcode 12.5修复程序挑选和发布的唯一其他提交是: 更新validateBaseUrl以使用最新的正则表达式(commit),该正则表达式修复了CVE-2020-1920,GHSL-2020-293。 Tags:ReactNative 移动开发工具 React Native下载
React Native是一种流行的跨平台移动应用开发框架,它可以让开发者使用React的语法和组件开发iOS和Android应用。以下是关于React Native开发指南的一些要点: 首先,需要掌握JavaScript和React的基础知识,因为React Native使用的是JavaScript语言。理解React的工作原理和基本概念,例如组件、状态和属性,对于React Native开发至关重要。 其次,熟悉React Native的核心组件和API。React Native提供了许多内置的组件和API,例如视图组件、文本组件、按钮组件等。理解这些组件和API的用法和特性,是构建React Native应用的基础。 接着,学习如何使用Flexbox布局来设计和排列React Native应用的组件。Flexbox是一种用于布局元素的弹性盒模型,可以帮助开发者有效地管理应用界面的布局和风格。 然后,了解如何在React Native处理用户交互和导航。React Native提供了处理点击事件和手势操作的手段,也提供了导航组件和路由库来实现页面之间的导航和切换。 此外,掌握调试React Native应用的技巧和工具也是非常重要的。React Native提供了一些调试工具,例如React Native Developer Tools和Reactotron,可以帮助开发者追踪和修复应用错误和问题。 最后,了解React Native的性能优化技巧和最佳实践也是必要的。因为React Native是使用JavaScript来执行应用逻辑和界面绘制的,所以在处理大数据量和复杂逻辑时需要注意性能方面的优化。 总之,熟悉JavaScript和React基础知识,掌握React Native的核心组件和API,学习flexbox布局和用户交互处理,掌握调试和性能优化技巧,将有助于开发者顺利地使用React Native构建跨平台移动应用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值