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 w

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}.










目录
相关文章
|
2月前
|
设计模式 存储 前端开发
React开发设计模式及原则概念问题之自定义Hooks的作用是什么,自定义Hooks设计时要遵循什么原则呢
React开发设计模式及原则概念问题之自定义Hooks的作用是什么,自定义Hooks设计时要遵循什么原则呢
|
3月前
|
前端开发 JavaScript 安全
TypeScript在React Hooks中的应用:提升React开发的类型安全与可维护性
【7月更文挑战第17天】TypeScript在React Hooks中的应用极大地提升了React应用的类型安全性和可维护性。通过为状态、依赖项和自定义Hooks指定明确的类型,开发者可以编写更加健壮、易于理解和维护的代码。随着React和TypeScript的不断发展,结合两者的优势将成为构建现代Web应用的标准做法。
|
7天前
|
XML 移动开发 前端开发
使用duxapp开发 React Native App 事半功倍
对于Taro的壳子,或者原生React Native,都会存在 `android` `ios`这两个文件夹,而在duxapp中,这些文件夹的内容是自动生成的,那么对于需要在这些文件夹中修改的配置内容,例如包名、版本号、新架构开关等,都通过配置文件的方式配置了,而不需要需修改具体的文件
|
9天前
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
2月前
|
JavaScript 前端开发 安全
[译] 使用 TypeScript 开发 React Hooks
[译] 使用 TypeScript 开发 React Hooks
|
2月前
|
移动开发 前端开发 JavaScript
"跨界大战!React Native、Weex、Flutter:三大混合开发王者正面交锋,揭秘谁才是你移动应用开发的终极利器?"
【8月更文挑战第12天】随着移动应用开发的需求日益增长,高效构建跨平台应用成为关键。React Native、Weex与Flutter作为主流混合开发框架各具特色。React Native依托Facebook的强大支持,以接近原生的性能和丰富的组件库著称;Weex由阿里巴巴开发,性能优越尤其在大数据处理上表现突出;Flutter则凭借Google的支持及独特的Dart语言和Skia渲染引擎,提供出色的定制能力和开发效率。选择时需考量项目特性、团队技能及生态系统的成熟度。希望本文对比能助你做出最佳决策。
122 1
|
2月前
|
前端开发
React——开发调式工具安装【五】
React——开发调式工具安装【五】
26 0
React——开发调式工具安装【五】
|
2月前
|
开发者 自然语言处理 存储
语言不再是壁垒:掌握 JSF 国际化技巧,轻松构建多语言支持的 Web 应用
【8月更文挑战第31天】JavaServer Faces (JSF) 框架提供了强大的国际化 (I18N) 和本地化 (L10N) 支持,使开发者能轻松添加多语言功能。本文通过具体案例展示如何在 JSF 应用中实现多语言支持,包括创建项目、配置语言资源文件 (`messages_xx.properties`)、设置 `web.xml`、编写 Managed Bean (`LanguageBean`) 处理语言选择,以及使用 Facelets 页面 (`index.xhtml`) 显示多语言消息。通过这些步骤,你将学会如何配置 JSF 环境、编写语言资源文件,并实现动态语言切换。
29 0
|
2月前
|
开发者 Java
JSF EL 表达式:乘技术潮流之风,筑简洁开发之梦,触动开发者心弦的强大语言
【8月更文挑战第31天】JavaServer Faces (JSF) 的表达式语言 (EL) 是一种强大的工具,允许开发者在 JSF 页面和后台 bean 间进行简洁高效的数据绑定。本文介绍了 JSF EL 的基本概念及使用技巧,包括访问 bean 属性和方法、数据绑定、内置对象使用、条件判断和循环等,并分享了最佳实践建议,帮助提升开发效率和代码质量。
28 0
|
2月前
|
前端开发 JavaScript Android开发
React Native 快速入门简直太棒啦!构建跨平台移动应用的捷径,带你开启高效开发之旅!
【8月更文挑战第31天】React Native凭借其跨平台特性、丰富的生态系统及优异性能,成为移动应用开发的热门选择。它允许使用JavaScript和React语法编写一次代码即可在iOS和Android上运行,显著提升开发效率。此外,基于React框架的组件化开发模式使得代码更加易于维护与复用,加之活跃的社区支持与第三方库资源,加速了应用开发流程。尽管作为跨平台框架,React Native在性能上却不输原生应用,支持原生代码优化以实现高效渲染与功能定制。对于开发者而言,React Native简化了移动应用开发流程,是快速构建高质量应用的理想之选。
34 0