react native 问题小记

最新推荐文章于 2021-10-20 19:46:53 发布

July_ing

最新推荐文章于 2021-10-20 19:46:53 发布

阅读量282

点赞数

本文链接：https://blog.youkuaiyun.com/July_ing/article/details/89176475

版权

这篇博客总结了在React Native开发过程中遇到的一些问题，包括overflow属性在不同平台的表现，Webview的边框处理，样式渲染问题，TextInput的高度自适应，setState不生效的调试技巧，Text文本的宽度自适应，以及针对特定设备的样式修复策略，如荣耀手机的闪烁问题和小米手机的点击穿透问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

overflow属性支持不好，安卓是hidden，ios是visible
overflow 安卓不生效的时候加个backgroundColor试下
webview会有黑色边框给webview加个backgroundColor: transparent就行
不加插件的话渲染变形可能安卓会实现不了比如box-shadow
fontWeight 数字也需要加引号
textInput高度自适应： ios本来就是自适应 andr需要改一下： onContentSizeChange获取event.nativeEvent.contentSize.height，给state, 然后在样式中绑定state.height 。注意textInput标签最好加上样式textAlignVertical: ‘top’
在调试rn项目时遇到个问题： setState不生效。直接跳过，就不执行这里的代码。貌似也没有报错（有个getNode 什么什么null的不知道算不算），通过trycatch捕捉后发现报错：原因是在scrollView的样式里写了alignItems: center，不该在style里写的，所以就报错了，导致setState也没有生效。
在使用this.props.xxFn()的时候最好写this.props.xxFn && this.props.xxFn()：第一是可能父组件没有传xxFn，第二如果简写传的是this.某ref && this.某ref.某fn，那刚开始ref对应组件还没有渲染完的时候就不会传进来方法，直接调用也会报错
Text文本宽度自适应

<View style={{alignSelf:'flex-start'}}>
<Text>哈哈哈</Text>
</View>

宽度不满时自适应，超出…
flexShrink: 1, + numberOfLines={1}
遇到荣耀等手机样式不正常比如闪烁：给父亲加backgroundColor: '#fff’试下
小米（可能还有其他安卓手机）bug 类似点透：可能是写了两层absolute
bounces={false} 可以禁止ios的橡皮筋效果
style样式： aspectRatio(宽高比): 2 -> 宽/高 = 2/1