解决 React Native Modal 中 ScrollView 无法滚动的问题（最佳 Modal 结构）
解决 React Native Modal 中 ScrollView 无法滚动的问题（最佳 Modal 结构） 在使用 React Native 开发应用时，一个很常见的问题是： 在 Modal 组件中放入 ScrollView ， 虽然滚动条显示出来了，但内容却无法正常滚动。 很多开发者会发现，Modal 打开后 ScrollView 看起来是可以滚动的， 但是手指滑动时内容却几乎不动，或者滚动非常困难。 这个问题通常是因为 Modal 的 Overlay 层拦截了触摸事件 。 如果 Overlay 使用 TouchableOpacity 或 Pressable 并包裹整个 Modal 内容， 那么滚动手势会被 Overlay 捕获，从而导致 ScrollView 无法接收到滚动事件。 问题示例 很多项目中的 Modal 结构通常像这样： <TouchableOpacity style={styles.overlay} onPress={onClose}> <TouchableOpacity style={styles.modal}> <ScrollView> ... </ScrollView> </TouchableOpacity> </TouchableOpacity> 在这种结构下，最外层的 TouchableOpacity 会捕获触摸手势。当用户尝试滚动时， 触摸事件会先被 Overlay 处理，从而阻止 ScrollView 的滚动行为。 结果就是： 滚动条存在，但滚动不流畅甚至无法滚动。 正确的 Modal 结构模式 正确的解决方案是： 不要用 Touchable 包裹整个 Modal ， 而是将 背景点击区域 与 Modal 内容区域 分离。 我们可以在背景上放一个独立的 Pressable， 用于点击关闭 Modal，而 Modal 内容本身保持普通 View。 <Modal visible={visible} transparent animationType="fade" onRequestClose={onC...
