React-Native 0.55.4嵌套Modal内FlatList无法滚动求助

我之前在RN 0.55.x版本也碰到过完全一样的问题——嵌套Modal里的FlatList死活滚不动，核心原因是官方Modal在嵌套时会拦截内层的触摸事件，导致FlatList接收不到滚动所需的触摸手势。给你几个经过验证的解决思路：

方案1：用第三方Modal库替代官方组件（最推荐） #

官方Modal的嵌套触摸事件处理在0.55版本有明显bug，react-native-modal这个库专门修复了这类问题，用法和官方Modal几乎一致，兼容性很好。

1. 先安装依赖：

npm install react-native-modal --save
# 或者用yarn
yarn add react-native-modal

2. 替换你代码里的官方Modal：
   在AddButton和Selector组件里，把原来的import { Modal } from 'react-native'替换成：

import Modal from 'react-native-modal';

之后保持原有Modal的属性不变，嵌套的FlatList就能正常滚动了。这个方案最简单，几乎不需要改业务代码。

方案2：手动设置PointerEvents（无需额外依赖） #

如果不想引入第三方库，可以通过设置pointerEvents属性来让内层FlatList接收触摸事件。

修改Selector组件里的Modal部分代码：

<Modal transparent animationType='fade' visible={this.visible} onRequestClose={this.hide}>
  {/* 给外层半透明背景设置pointerEvents="box-none"，允许事件穿透到内层 */}
  <View style={{ flex: 1, backgroundColor: '#0005', alignItems: 'center', paddingTop: 80 }} pointerEvents="box-none">
    {/* 给FlatList的容器设置pointerEvents="auto"，恢复事件接收 */}
    <View style={{ width: '80%', backgroundColor: '#fff', borderRadius: 5, maxHeight: '80%', overflow: 'hidden' }} pointerEvents="auto">
      <FlatList 
        data={data}
        keyExtractor={i => i}
        getItemLayout={(_, index) => {
          const height = 40 + HairSpacer.width;
          return { length: height, offset: height * index, index };
        }}
        ItemSeparatorComponent={HairSpacer}
        renderItem={this.renderItem}
        pointerEvents="auto" // 显式允许FlatList接收触摸事件
      />
    </View>
    {/* 关闭按钮也要恢复事件接收 */}
    <TouchableOpacity onPress={this.hide} style={{ marginTop: 12 }} pointerEvents="auto">
      <Icon name='ios-close-circle' size={50} color='#ccc' />
    </TouchableOpacity>
  </View>
</Modal>

原理是让外层的半透明背景不拦截触摸事件，只让需要交互的内层组件（FlatList、关闭按钮）接收事件。

方案3：重构结构，避免嵌套Modal（最彻底） #

嵌套Modal本身就不是RN推荐的用法，长期来看可以重构代码，把内层的Selector Modal提升到根组件层级，通过全局状态（比如MobX、Redux）来控制显示/隐藏，彻底避免嵌套带来的层级问题。

比如在你的App根组件里引入Selector的Modal，通过MobX的observable状态控制visible，这样Selector的Modal就不会嵌套在AddButton的Modal里，自然不会有触摸事件冲突。

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