React Native页面存在Lottie文件时TouchableOpacity无法点击如何解决

问题原因 #

这是React Native的视图堆叠触摸优先级特性导致的：同个父容器内，后渲染的组件默认层级更高。你当前代码里<LottieView>的渲染顺序在<Child>之后，如果<LottieView>的布局范围覆盖了<Child>的区域，触摸事件会被上层的LottieView拦截，导致下层Child里的TouchableOpacity无法响应。

解决方法 #

• 方法1：调整组件渲染顺序
  把需要响应交互的<Child>放在<LottieView>后面渲染，保证<Child>层级更高，触摸事件不会被拦截：

return (
 <View style={styles.container}>
  <LottieView
    style={styles.anime}
    source={require('../../assets/40375-health-loader-radar.json')}
    autoPlay
    loop
  />
  <Child userName={userName} />
</View>
);

• 方法2：给LottieView禁用触摸响应
  如果Lottie动画不需要响应用户交互，可以直接给它添加pointerEvents="none"属性，所有触摸事件会直接透传到下层组件，无需调整布局顺序：

<LottieView
  style={styles.anime}
  source={require('../../assets/40375-health-loader-radar.json')}
  autoPlay
  loop
  pointerEvents="none"
/>

• 方法3：通过zIndex手动指定层级
  如果你需要保持当前的渲染顺序，直接给<Child>组件设置更高的zIndex值，强制它的层级高于LottieView即可：

<Child userName={userName} style={{zIndex: 10}} />
<LottieView
  style={[styles.anime, {zIndex: 1}]}
  source={require('../../assets/40375-health-loader-radar.json')}
  autoPlay
  loop
/>

内容的提问来源于stack exchange，提问作者LMH