React Native Nested ScrollView 无法在 Android 设备上滚动

IT技术 javascript reactjs react-native
2021-04-03 20:04:50

我在 Android 设备上遇到了嵌套滚动视图的问题，但 IOS 正常

如何解决 B scrollview 无法滚动的问题？

<ScrollView>  // A ScrollView
    <View><Text>Hello</Text></View> 
    <View><Text>Hello</Text></View> 
    <View><Text>Hello</Text></View> 
    <View><Text>Hello</Text></View> 
    <View>       
        <ScrollView> // B ScrollView
            <View><Text>Hello</Text></View>         
            <View><Text>Hello</Text></View>         
            <View><Text>Hello</Text></View>          
            <View><Text>Hello</Text></View>      
        </ScrollView> 
    </View>
</ScrollView>
5个回答

如果 API 21 作为最低目标是一个选项，您可以升级到 react-native 0.56.x 并尝试新的 prop nestedScrollEnabled。

注意：它是为了在子滚动视图中使用，即

<ScrollView {...parentProps}>
  <ScrollView {...childProps} nestedScrollEnabled={true}>
  </ScrollView>
</ScrollView>
嵌套的水平 ScrollViews 被确认在 Android 上不起作用 -例如，参见snack.expo.io/@harrytravelchime/827f87。事实上，即使使用原生组件，这也是一个大问题：stackoverflow.com/questions/44798354/...
2021-05-29 20:04:50
亲爱的 Alberto，我有一个水平 ScrollView，其中包含另一个水平 scrollView，我已经尝试过您的解决方案，但它在 android 上不起作用。任何的想法？
2021-06-08 20:04:50
伙计，在尝试让可滚动的拖放操作在 ScrollView 容器内工作 3 天后，您刚刚救了我的命。
2021-06-09 20:04:50
我希望我可以多次投票……谢谢它的工作原理
2021-06-21 20:04:50

将 "nestedScrollEnabled={true}" 属性添加到内部 ScrollView，它将按预期工作。

当您在 android 中运行应用程序时，React-native ScrollView 组件使用 Android ScrollView。

Android ScrollView 默认不支持嵌套滚动。在android中需要使用NestedScrollView来实现嵌套滚动。

这对我不起作用。你能看看这里吗？stackoverflow.com/questions/63437251/...
2021-05-25 20:04:50
它可以通过使用自定义本机 ui NestedScrollView 来解决我的情况吗？我不知道在哪里创建自定义 viewManager 类文件。
2021-06-08 20:04:50
谢谢，但是如何在我的本机情况下使用 NestedScrollView ？
2021-06-15 20:04:50
抱歉，我仍然不了解用于 android doc 的 coustom native ui，您想详细解释一下我的情况吗？
2021-06-15 20:04:50
2021-06-17 20:04:50
@0x01Brain ，使用facebook.github.io/react-native/docs/0.57 /... 现在由 react-native 支持
2021-06-08 20:04:50
您的方式有效，但是在设置包装嵌套滚动视图的包装视图以 flex 视图并将嵌套滚动视图的高度更改为 700 或任何仅在全屏显示嵌套视图并滚动所有结尾的高度时会出现问题滚动视图您将不会再次向上滚动。您可以看到编辑后的代码：snack.expo.io/SJYzbXGmV
2021-06-18 20:04:50

在 ScrollView 中，将 contentContainerStyle 的样式设置为flex: 1：

<ScrollView>  // A ScrollView
    <View><Text>Hello</Text></View> 
    <View><Text>Hello</Text></View> 
    <View><Text>Hello</Text></View> 
    <View><Text>Hello</Text></View> 
    <View>       
        <ScrollView contentContainerStyle={{flex:1}}> // B ScrollView
            <View><Text>Hello</Text></View>         
            <View><Text>Hello</Text></View>         
            <View><Text>Hello</Text></View>          
            <View><Text>Hello</Text></View>      
        </ScrollView> 
    </View>
</ScrollView>

它在android上对我有用。请告诉我它是否适合您。

这对我不起作用。你能看看这里吗？stackoverflow.com/questions/63437251/...
2021-06-02 20:04:50
其它你可能感兴趣的问题
上一篇React 从 useEffect 中的 Redux 存储中获取状态 下一篇无法获取 index.html Azure Linux Web 应用程序