React-Native近期采坑小结

1.zIndex

在Android上使用zIndex来控制组件的层级,会遇到元素不显示的问题。
解决方案:
尽量改变组件的顺序,而不用zIndex
尽量不要使用zIndex来控制组件的层级,默认情况下,使用position: 'absolute'后,后面的元素会默认覆盖在前面的元素之上。所以删除zIndex,改变一下组件的顺序就OK啦。
issues: https://github.com/facebook/react-native/issues/8968

2.borderStyle:'dashed'

目前,Android上,如果想要实现一条水平方向的虚线,一开始想到的肯定是:

border: {
  borderColor: 'red',
  borderWidth: 0,
  borderBottomWidth: 1,
  borderStyle: 'dashed'
}

但是实际上,这样是不会生效的,目前Android还不支持某一边设置虚线。
解决方案:
方案一:假设我们想要一个线宽为h的水平虚线,设置一个高度为h的view,里面给一个view设置四边都是dashed的边框,borderWidth为h,高度为0,然后外层设置overflow: 'hidden'但是,你会发现,不管你怎么overflow,都是没用的,Android照样会渲染出两个边框,看起来overflow也没有起作用。
方案二:换一种思路,再弄一个view,高度为h,背景颜色设置成你想要的颜色,然后把下面的border覆盖掉。
此外,也可以关注下这个issue: Border is invisible when using borderStyle='dashed' with borderBottom #7838

3.TouchableOpacity等可点击组件,有时候点击不触发onPress

这个问题,如果你只是在代码里面放了类似下面的代码:

<TouchableOpacity
    style={styles.btn}onPress={this.onPress.bind(this)}>
  <Text>立即预定</Text>
</TouchableOpacity>

并且onPress回调里面,并没有做太多的逻辑,或者导致重新渲染。
那么,你没有必要怀疑是你代码的问题。RN对部分国产手机那些自定义的手势支持不好。

4.[style]Android上Text默认的字体颜色,不是black,不是black,不是black

如果在Android上面,不显示地给Text添加color,那么显示出来的字体颜色就是灰色。跟iOS的表现不一致;
解决方案:
方案一:给每个Text都设置color

不足:每次都设置color。比较繁琐

方案二:写一个自定义组件

比如MyText,这个Text设置颜色,每次使用xxx就默认为你设置的颜色了。
不足:多出来了一个新的组件,也比较繁琐。
多出来了一个新的组件,也比较繁琐。

方案三:设置默认props

在入口文件里面写上默认的style,比如:
Text.defaultProps.sytle = { 'color': '#212121'}

5.[ListView] renderRow 使用 this.state.xxx 属性,setState({xxx:'xxx'})的时候 ListView没有重新渲染

解决方案 重新设置 ListView 的 dataSource

6.[console] console.log()打印出来的对象,值不是最准确的,可能会受后面执行代码的影响。

7.[网络请求] 安卓机型连代理,有时抓不到请求

RN-andriod 用的网络模块是okhttp。这个模块有一个类似代理路由的功能。通过代理(比如charles)发送一个请求时,如果该请求timeout或者error了(比如abort),okhttp在下次发送请求时可能不走charles。导致请求发出去了,但是charles抓不到。

8.[ios模拟器] 配置localhost:port之后,请求不到js

如果没有提示说服务没有启动,提示404。基本上就是你电脑上没有配置localhost对应的host。可能有写hosts工具切换的时候,把localhost弄掉了。自己加回来:

127.0.0.1 localhost
时间: 2024-10-09 23:27:33

React-Native近期采坑小结的相关文章

react native遇到的坑

1.模拟器报错no bundle url present https://github.com/facebook/react-native/issues/12754 http://www.cnblogs.com/dragon-aslan/p/6965014.html 2.模拟器快捷键 回到首页: Cmd + Shift + H 按一次 HOME键摁两次: Cmd + Shift + H 按两次 旋转 :Cmd + 左/右 类似手机长按 : 鼠标放app图像上,长摁电脑左下角,然后Cmd + Sh

react native 遇到的坑

1.项目中新加入组件,应执行npm install命令 2.项目执行react-native run-android 报错,应进入android目录,执行gradlew.bat clean命令 3.ListView引用函数,应先在构造器中进行this绑定 constructor(props) { this.renderItem = this.renderItem.bind(this); } onPressIcon(uid, aid) { const {navigator} = this.prop

React Native Android 从学车到补胎和成功发车经历

[工匠若水 http://blog.csdn.net/yanbober 未经允许严禁转载,请尊重作者劳动成果.私信联系我] 1 背景 好几个月没发车了,完全生疏了,为了接下来能持续性的发好车,这次先准备发个小车-- React Native.没错,就是这个从去年到现在官方都憋不出大招 1.0 版本,而被我朝开发者疯狂追捧备受争议的破车.怎么说呢,这玩意刚出来时有了解过,当时的内心是抵触的,但是内心总是架不住天朝的炒作能力,更架不住硬性指标,于是我就这么被 React Native 蹂躏了一番,也

Android React Native的使用细节问题

踩了几天React Native Android的坑.总结为一句话,目前android学习react native还为时过早,坑太多,需要你慢慢去踩.就目前来讲,能踩的坑基本上都踩了一遍,所以还是等它稳定下来再去学吧,否则会浪费掉一大堆时间. 单位 在React Native中,组件的宽度,高度都是不用写单位的,你写个100,在Android中代表的到底是100px还是100dp,就不得而知了,这时候自己实践一下就一目了然了. window.width={Dimensions.get('wind

React native采坑路

1. Running 1 of 1 custom shell scripts 卡住的问题. 分析: 四个文件没有下载完成. boost_1_63_0.tar.gz folly-2016.09.26.00.tar.gz double-conversion-1.1.5.tar.gz glog-0.3.4.tar.gz 1.下载文件 ---->这里有解决方案: http://bbs.reactnative.cn/topic/4301/ios-rn-0-45%E4%BB%A5%E4%B8%8A%E7%8

第一个React Native程序踩到的那些坑

毫不夸张的说用React Native写一个Hello World !程序是我碰到最复杂的Hello World.网络上的有关的环境搭建相关的文档也很多,但是总是有这样那样的问题. 官方中文版的安装文档,windows环境搭建文字教程 原因可能有3个: 1. 这个东西最早还是在Mac机上开发的,可能支持的会好一点,windows平台时间短. 2. 网络被墙或不稳定,注册npm淘宝镜像会快很多,但是不能完全解决问题. 3. 版本问题,Nodejs版本.React Native 版本.Android

记一次在Windows上搭建React Native Android环境踩过的坑

要说最近技术圈什么比较活跃,我想除了动态加载框架和热修复技术之外,非Facebook的React Native莫属了吧,其实RN对IOS的支持比较早,但是Android似乎难产了,直到9月份才刚开源.距离RN开源也有一段时间了,一直没有去学习,今天兴趣来潮,索性学一把吧. 本文假设你的Windows上安装了Android SDK,并配置好了环境变量. 安装Node.js 从官网https://nodejs.org/en/下载Node.js的windows版,也不知道为什么版本迭代这么快,之前安装

谈谈React Native环境安装中我遇到的坑

谈谈React Native环境安装 这个坑把我困了好久,真的是接近崩溃的边缘...整理出来分享给大家,希望遇到跟我一样问题的小伙伴能尽快找到答案. 首先,这是在初始化App之后,react-native run-android指令  报错如下: 这个问题困扰了好久,查阅了很多资料,使用各种解决办法,有的资料解决办法如下: 跟随着改变之后,再react-nativerun-android,运行结果如下: 以上的方法依然未能解决,反而报了其他的错误,然后我把文件中更改的地方复原. 下面是第二种方法

React Native 环境搭建踩坑

React Native (web Android)环境搭建踩坑(真的是一个艰辛的过程,大概所有坑都被我踩了 官方文档地址 : https://facebook.github.io/react-native/docs/getting-started 选择  Building Projects with Native Code 大家可以参照官方文档一步一步来,下面是我遇到的一些问题总结 查看一下node版本           node -v ------- 进入安装之前最好查一下JDK版本