React-native使用过程中遇到的一些坑

最新推荐文章于 2021-03-11 15:38:09 发布

Alexbyy

最新推荐文章于 2021-03-11 15:38:09 发布

阅读量1.4k

点赞数

分类专栏：前端文章标签： react-native 坑

本文链接：https://blog.csdn.net/Alexbyy/article/details/99639628

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文档详细列举了React Native开发中常见的问题及其解决方案，包括Text标签显示不全、重复设置key导致错误、条件渲染问题、Image尺寸不符、SwipeListView自动侧滑、编译警告、TextInput显示问题、iOS弹框交互及Android文本复制等，提供了实用的代码示例和调整策略。

摘要由CSDN通过智能技术生成

1、部分android手机Text标签展示不全（比如设置标签内容为 1234，只展示123）或者不展示特别是1加手机
解决方法：通过设置字体来解决，rn里有写好的样式CommonStyles.priceFontStyle

2、给一个标签重复设置key，android上会报错
解决方法：避免重复设置key

3、isTrue & <View>......</View> 当isTrue为"", android上返回""会报错
解决方法：

1> isTrue强制转换为boolean
2> 用三元表达式写法 isTrue ? <View>......</View> : null

4、image放在text标签里，部分android上展示的区域远远小于设置区域

例如： width: 100， height: 50

解决方法：

const multiple = **.isIOS() ? 1: PixelRatio.get();
width = width * multiple;
height = height * multiple;

5、SwipeListView 出现自动侧滑问题.

SwipeListView useFlatList时候出现自动侧滑问题. 或者第一屏加载刷新多次问题

可以解决:

需要注意key, 用keyExtractor 指定key的生成规则

6、m站编译时的warning提示如下：

There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:

引发的场景： 引入文件的时候出现了不同的名字，或者大小写不一致例如：

import Base64 from 'utils/base64';

import Base64 from 'utils/Base64';

解决方法：修改一致即可解决

7、textinput在 android手机上value展示不全
解决方法： padding水平垂直方向均设置为0

8、ios中的埋点的弹框，模拟器中拖动失效，会挡住页面的元素，不能操作。

拖动方法：1、左手三个手指按住触摸板，右手按住左键拖动

2、鼠标左键长按，2秒后可以拖动

9、android机Text标签设置selectable=true时仍不能复制文本。

这种情况是当Text在flatlist中时出现，解决方法是设置一个key={Math.random()},https://github.com/facebook/react-native/issues/14746