带有嵌套 ScrollView 的可滑动 React-native-modal

Posted 2023-02-16

【中文标题】带有嵌套 ScrollView 的可滑动 React-native-modal

【英文标题】：Swipeable React-native-modal with nested ScrollView

【发布时间】：2018-07-06 02:03:29

【问题描述】：

我正在使用实现swipe feature 的react-native-modal 中最新的release

我想在我的模式中添加一个 ScrollView。

这是我到目前为止所做的

https://snack.expo.io/ryRylJFHz

【参考方案1】：

我多次遇到这个问题，我需要添加一个滚动视图，但没有一个包做得很好。实际上，处理滑动和滚动事件比预期的要复杂。

我想出创建一个组件来处理默认情况下的滚动视图行为和其他非常常见的行为。你可以在这里查看，它叫react-native-modalize

希望它能解决这个问题！

【参考方案2】：

我知道这个问题很老，但由于没有答案，我正在提供解决方案。

react-native-modal 的最新版本提供了一个 prop propagateSwipe，它允许滑动事件传播到您的情况下的子组件ScrollView

<Modal propagateSwipe=true> 
    <ScrollView> 
       // .... other components
    </ScrollView>
<Modal>

但目前在v11.3.1 中，当您提供swipeDirection 道具时它有一个小问题并且它不起作用。

解决此问题的方法是在ScrollView 中添加TouchableOpacity 组件

<Modal> 
    <ScrollView> 
         <TouchableOpacity> ... </TouchableOpacity> 
    </ScrollView>
<Modal>

您可以阅读更多关于此问题的here。

【讨论】：

通过使用 TouchableOpacity，ScrollView 上的滚动效果很好

是的，添加任何可触摸的东西都可以解决问题。

【参考方案3】：

我通过定义滚动视图容器的固定高度解决了这个问题。

例如

<View style=height: 300>
   hasResults ? (
       <ScrollView>
         ....
       </ScrollView>
    ) : undefined
</View>

根据官方反应原生文档滚动视图应该有一个有界的高度才能工作。

https://reactnative.dev/docs/scrollview

Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer flex: 1 down the view stack can lead to errors here, which the element inspector makes quick to debug.