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

Question

我正在使用实现滑动功能的最新版本的react-native-modal

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

这是我到目前为止所做的

https://snack.expo.io/ryRylJFHz

Answer 1

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

最新版本react-native-modal提供了一个道具propagateSwipe，允许滑动事件传播到您的案例中的子组件以ScrollView

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

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

这个问题的解决方法是在TouchableOpacity里面添加组件ScrollView

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

您可以在此处阅读有关此问题的更多信息。

Answer 2

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

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

希望它能解决这个问题！

Answer 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.