RN 遇到了哪些坑

 

1、Image组件

overlayColor

当图片有圆角的时候，指定一个颜色用于填充圆角处的空白。虽然一般情况下圆角处是透明的，但在某些情况下，Android 并不支持圆角透明，比如：

• 某些 resize 模式比如'contain'
• GIF 动画

以用户头像为例子，官网推荐了overlayColor属性，设置成和背景色一致，经过实际测试，此方法仍旧会在Android真机调试时，出现radius圆角失效，展示出方块头像。

这边有个更有效的办法 就是在外层加个容器，并且设置border-radius和overflow:hidden，可以防止android真机上出现radius属性圆角失效，并且需要和圆角view设置同等width和height！！！

 

2、软键盘收起

keyboardDismissMode

用户拖拽滚动视图的时候，是否要隐藏软键盘。

跨平台可用的值

• 'none' （默认值），拖拽时不隐藏软键盘。
• 'on-drag'，当拖拽开始的时候隐藏软键盘。

仅iOS可用的值

• 'interactive'，软键盘伴随拖拽操作同步地消失，并且如果往上滑动会恢复键盘。安卓设备上不支持这个选项，会表现的和none一样。

keyboardShouldPersistTaps

如果当前界面有软键盘，那么点击scrollview后是否收起键盘，取决于本属性的设置。（译注：很多人反应TextInput无法自动失去焦点/需要点击多次切换到其他组件等等问题，其关键都是需要将TextInput放到ScrollView中再设置本属性）

• 'never' （默认值），点击TextInput以外的子组件会使当前的软键盘收起。此时子元素不会收到点击事件。
• 'always'，键盘不会自动收起，ScrollView也不会捕捉点击事件，但子组件可以捕获。
• 'handled'，当点击事件被子组件捕获时，键盘不会自动收起。这样切换TextInput时键盘可以保持状态。多数带有TextInput的情况下你应该选择此项。
• false，已过期，请使用'never'代替。
• true，已过期，请使用'always'代替。

 

3.mb(this).setProps与组件内this.state不属于同一个对象引用

mb状态管理框架下 Scene 页面不要去用 this.setState 来更新页面状态，要用 mb(this).setProps 更新状态。其他自定义非scene组件不受影响

 

4.场景内，设置了ScrollView，但是部分包含TextInput组件的区域无法响应用户上拉下拉的滚动事件

当ScrollView中包含TextInput，且TextInput的textAlign设置为right时，此时触摸到TextInput上面，拖动滑动会发现没有任何滑动效果，这是因为事件被TextInput消费掉了，解决办法是，在TextInput组件的父容器添加一个属性pointerEvents="none"

<View pointerEvents="none" style={{flexDirection: 'row', flex: 1}}>
    <TextInput ... >
        ...
    </TextInput>                
</View>

 

5. react native ios端 ScrollView滚动条显示在屏幕中间

解决方法：
给ScrollView加 scrollIndicatorInsets属性

<ScrollView scrollIndicatorInsets={{ right: 1 }}>
    ...
</ScrollView>

如果是WebView组件，则是contentInset（目前尚未完全确认此属性有效，待观察）

<WebView contentInset={{ right: 1 }}>
    ...
</WebView>

 

6.TextInput组件在ios上自带输入法下无法输入中文（输入闪烁） ---- react-native 0.55.4

这个问题，是因为TextInput不能设置value或者defaultValue 和 onChangeText，否则会出现Ios无法输入中文的现象（还可以通过控制this.setState解决）

 

7.React Native项目 Native module RNFSModule tried to override RNFSModule for module name RNFS...

解决方案：MainApplication.java特别检查你的protected List<ReactPackage> getPackages(); 这RNDeviceModule可能是列表中的两倍。也就是说你MainApplication里面的link库重复了，删除重复的就可以了。

 

8.react-native 连接真机debugger时打包弹出报错 android - Waiting for Debugger 解决

解决办法：关闭再重开一遍开发者模式，行之果然有效

 

9.The minSdk version should not be declared in the android manifest file.

在react-native项目解析android包的时候，报了个错误error: The minSdk version should not be declared in the android manifest file. 这个错误如下图所示会显示在右下角。

出现这个问题的原因是Androidstudio3.0 以后不能在manifest.xml设置这些，必须在 gradle里设置

解决方案 把manifest.xml里的sdk最小版本设置都删掉（此处参考了这篇文章https://blog.csdn.net/yuge8930/article/details/85336450）

 

10.IOS和Android阴影

在react-native中，IOS的阴影效果很好处理，但是android上，即便设置了 elevation值，也会出现阴影展示异常，比如展示不全，看起来似乎被切割了

解决办法

在react-native中，android的阴影需要符合如下条件：

容器的内边距padding能够容纳多出来的阴影宽度*2倍（左右各1份），上下左右边距都是如此

 

11.react-native 绝对定位元素设置zIndex层级无效 仍旧被遮盖 如何设置层级

以如下代码为例，如果将source对应的Image放在<TouchableOpacity>中，就会被TouchableOpacity覆盖层级，因为在RN中所有子元素都不会超过父元素的层级

<View style={{ flex: 1, position: 'relative' }}>
      {source ? (
        <Image
          style={{
            position: 'absolute',
            zIndex: 10,
            top: OASize(5),
            right: OASize(20),
            width: OASize(imgWidth),
            height: OASize(16),
          }}
          // resizeMode="contain"
          source={source}
        />
      ) : null}
      <TouchableOpacity
        style={{
          ...
        }}
        onPress={onPress}
        activeOpacity={0.85}
      >
        ....
      </TouchableOpacity>
</View>

 

12.react-native transform如何写

transform: [{translateX: 100}]

 

13.require unknown module 1679(react-native XCode跑起来报错)

我是在切换分支代码后出现这个问题的，是因为没有清除上次文件的缓存导致的，需要npn run start reset --cache

或者XCode 进行 Product->Clean

 

14.React-native Flatlist/SectionList/ScrollView的onEndReached多次触发问题解决

解决思路1：设置noMore判断，符合noMore则return停止执行之后的代码

解决思路2：经过调试发现，是因为最外层父View没有设置固定height或只设置{flex：1}属性，导致onEndReached不能正确监听事件，flex: 1是自动计算高度，这对容器列表组件很不友好，计算会错乱。可改为给最外层父组件一个高度{height：‘100%’}；

 

15.react-native 使用flexWrap无法实现换行

react-native 使用flexWrap无法实现换行，经过排查，发现是父元素定义了flexWrap: 'wrap'之后，子元素又定义了flex: 1导致撑开自适应，于是换行就无效了

 

16.Android真机调试 显示端口被占用 杀死进程仍旧无效

（1）如果无法映射端口，则拔插usb或者删除真机上的app或者重启手机（最有效的办法）

（2）如果成功后，一直卡在广告页，则开启debugger和热更新，之后重启app，观察弹出的服务窗口的加载进度

 

17.react-native TextInput组件在模拟器Simulator上鼠标聚焦后键盘不弹出

            <TextInput
              style={styles.inputItem}
              onChangeText={text => {
                const newText = text.replace(/[^\d]+/, '');
                mb(this).setProps({
                  oaCode: newText.trim()
                });
              }}
              defautValue={oaCode || ''}
              placeholder={'请输入手机号码'}
              maxLength={11}
              keyboardType="number-pad"
              returnKeyType="next"
            />

经过排查，是模拟器配置的问题，默认是外接键盘输入，而非模拟器键盘输入。

点击模拟器界面，获得焦点后，点击如下选项切换模拟器自带键盘进行输入！

 

18.ios模拟器 remote debugger时报错TypeError: window.deltaUrlToBlobUrl is not a function

(index):222 Uncaught (in promise) TypeError: window.deltaUrlToBlobUrl is not a function
    at getBlobUrl ((index):222)
    at [WebSocket.ws.onmessage](WebSocket.ws.onmessage) ((index):185)

这是因为我们之前打开过模拟器debugger-ui，将debugger-ui关闭，再reload模拟器就可以了

 

19.Xcode11 Unknown argument type '__attribute__' in method

Xcode版本是10.2.1 由于想尝试下Xcode11（Xcode10的时候没事，更新到Xcode11就开始报这个错了），于是搞环境，试运行，报错：Xcode11 Unknown argument type '__attribute__' in method 

解决方法（找到以下目录）：

node_modules/react-native/React/Base/RCTModuleMethod.mm

其中的方法修改成下面这样：

static BOOL RCTParseUnused(const char **input)
{
  return RCTReadString(input, "__unused") || RCTReadString(input, "__attribute__((__unused__))") || RCTReadString(input, "__attribute__((unused))");
}

20.Android在调试模式下摇晃手机（等同command+d） 调出调试框选择toggle选中Text元素报错 renderer.getinspectorDataForViewTag not found ...

在RN中，如果Text组件中包含另外一个Text组件，则会在toggle选中该元素时报错

<Text>测试文本1<Text>内部测试文本2</Text></Text>

未完，持续更新中...