关于React Native的那些坑
好久没写博客了,特地把之前接触React Native时遇到的坑总结一下。
初始化一个React Native项目时,可能会遇到以下这些坑:
1、项目版本号与安卓模拟器中安装的 compileSdkVersion 和 buildToolsVersion 版本不一致,这时候可以直接修改 项目 => android => app => build.gradle文件下的版本号,如下:
2、初始化一个项目并运行项目时,可能会一直报错,这时有可能是因为缺少 local.properties文件,该文件用于指定 SDK的路径(该文件存放在项目目录下 => android 下)
文件内容如下:
sdk.dir=C\:\\Users\\android\\AppData\\Local\\Android\\sdk (这是我的sdk安装路径)
3、可能会出现React Native与javascript版本号不一致,这时候可以新建一个与javascript版本号一致的React Native项目,命令如下:
- react-native init 项目名 --version 具体的版本号
4、有时候运行会出错,报错类似"Cannot add a child that doesn't have a YogaNode or parent node" 这种,有可能是因为render方法中含有注释语句,这时候删除注释语句,可能就会正常运行了。
5、文本放在Text标签中,不要直接放在View标签中(View是一个容器,用来包含其他的标签的),否则模拟器可能会直接崩了(亲测,android studio和genymotion下都崩了,当然也可能是我的版本的原因)
6、当我们执行点击事件,如onPress时,希望在点击后显示高亮状态,这时候就可以使用TouchableHighlight组件了,但是,注意:该组件只能包含一个子节点,否则会出错,如果希望它包含多个节点,那么可以在它里面嵌套一个View(默认情况下TouchableHighlight组件在点击时会出现一个黑背景,且标签大小可能会有所改变,要解决该问题,可以使用属性underlayColor,将其值设为白色(‘#fff’))
7、在使用导航组件react-navigation时,使用yarn来安装(yarn add react-navigation
),用npm安装的话可能会存在许多未知错误(更不要使用cnpm)
关于React Native的那些坑的更多相关文章
- react native遇到的坑
1.模拟器报错no bundle url present https://github.com/facebook/react-native/issues/12754 http://www.cnblog ...
- 初识React Native,踩坑之旅....
开启Genymotion Android模拟器后 1.运行“react-native run-android”报端口冲突....解决方法: 2.运行“react-native run-android” ...
- react native 遇到的坑
1.项目中新加入组件,应执行npm install命令 2.项目执行react-native run-android 报错,应进入android目录,执行gradlew.bat clean命令 3.L ...
- 记录VSCode开发React Native的一些坑
当我们点Debug Android时,会弹出以下错误 Could not debug. Unable to set up communication with VSCode react-native ...
- React Native初探
前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...
- React Native指南汇集了各类react-native学习资源、开源App和组件
来自:https://github.com/ele828/react-native-guide React Native指南汇集了各类react-native学习资源.开源App和组件 React-N ...
- 给所有开发者的React Native详细入门指南
建议先下载好资料后,再阅读本文.demo代码和资料下载 目录 一.前言 二.回答一些问题 1.为什么写此教程 2.本文适合哪些人看 3.如何使用本教程 4.需要先学习JavaScript.HTML.C ...
- 为什么学习React Native三点原因
React Native不到两岁,兼容Android平台刚刚1年.我学习React Native其实也就不到1年,不算长,也不算短. Paul Graham在文章中写过:大多数人真正注意到你的时候,不 ...
- React Native拆包及热更新方案 · Solartisan
作者:solart 版权声明:本文图文为博主原创,转载请注明出处. 随着 React Native 的不断发展完善,越来越多的公司选择使用 React Native 替代 iOS/Android 进行 ...
随机推荐
- Python学习(五):易忘知识点
1.列表比较函数cmp >>> a = [1,2,3,4] >>> b = [1,2,3,4,5] >>> c = [1,2,3,4] >& ...
- zepto的返回顶部scrollTop的动画解决方法
写移动端的时候,引入的zepto.js里的animate不包括scrollTop,所以返回顶部的时候,没有动画的效果.这里我使用的是setInterval的方法.代码详情如下 <!DOCTYPE ...
- Docker了解
Docker了解1.Docker能做什么:Docker能够解决虚拟机能够解决的问题,同时也能够解决虚拟机由于请求资源过高无法解决的问题. *隔离应用依赖 *创建应用镜像并进行复制 *创建容易分发的即启 ...
- Visual Studio 我的插件
为了以后开发方便,自己记录下好用的Visual Studio 扩展 1.outline if折叠 2.Indent Guides 代码块虚线 3.CodeMaid 大文件里能够重构文件,快速定位方法. ...
- 通过js中的useragrent来判断设备是pc端还是移动端,跳转不同的地址
if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alc ...
- 二维码utils希望对大家有帮助
package cn.itcast.utils; import java.io.File; import java.nio.file.Path; import java.util.HashMap; ...
- ActiveReports 6:如何升级旧版本的项目
如果现在的项目使用的是ActiveReports for .NET 3.0,那么有两种升级方式: 一是使用ActiveReports 6.0附带的转换工具(参见下面"升级ActiveRepo ...
- 微信小程序开发之图片预览
实现图片的展示和大图预览 使用wx.previewImage(OBJECT)来实现 OBJECT参数说明: 参数 类型 必填 说明 current String 否 当前显示图片的链接,不填则默认为 ...
- amaze UI 笔记 - JS
导航添加依据 http://amazeui.org/javascript 下面内容属学习笔记,如有理解偏差和错误请留言相告,感谢!* =(官网这块写的很详细) 一 .UI增强 1.警告框 显示可关闭的 ...
- Factom(公证通)--基于区块链的存证系统
Factom这个Solution在2014年的时候就已经推出了,现在已经2018年了,我才来写这一篇分析文章可能有些迟了,但是它是十分具有参考价值的.因为现阶段来开区块链虽然炒得火热--养猫.养狗.草 ...