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

【问题标题】：React Native Nested ScrollView Can`t Scroll on Android DeviceReact Native Nested ScrollView 无法在 Android 设备上滚动
【发布时间】：2016-09-24 03:41:23
【问题描述】：

我有关于 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>

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

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

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

<ScrollView {...parentProps}>
  <ScrollView {...childProps} nestedScrollEnabled={true}>
  </ScrollView>
</ScrollView>

【讨论】：

亲爱的 Alberto，我有一个水平 ScrollView，其中包含另一个水平 scrollView，我已经尝试过您的解决方案，但它不适用于 android。有什么想法吗？
已确认嵌套的水平滚动视图无法在 Android 上运行 - 请参阅 snack.expo.io/@harrytravelchime/827f87 以获取示例。事实上，即使是原生组件，这也是一个大问题：stackoverflow.com/questions/44798354/…
老兄，经过 3 天的尝试让可滚动的拖放功能在 ScrollView 容器中工作，你救了我的命。
我希望我能多次投票...谢谢它的工作原理

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

谢谢，但是如何在我的 react native 案例中使用 NestedScrollView ？
对不起，我还是不明白 android doc 的自定义原生 ui，你想解释一下我的案例吗？
使用自定义原生 ui NestedScrollView 是否可以解决我的问题？我不知道在哪里创建自定义 viewManager 类文件。
试试github.com/Neson/react-native-android-design-support/blob/…
这对我不起作用。你能看看这里吗？ stackoverflow.com/questions/63437251/…

【解决方案4】：

https://gist.github.com/ashrithks/8d97f928d92643468a26e29c4d2dbb67

试试上面的，博览会链接：- https://snack.expo.io/S11vIpHA-

老套路

【讨论】：

您的方式可行，但是在将嵌套滚动视图的包装视图设置为弹性视图并将嵌套滚动视图的高度更改为 700 或仅在全屏中显示的任何高度时出现问题嵌套视图并滚动滚动视图的所有末尾，您将不会再次向上滚动。可以看到修改后的代码：snack.expo.io/SJYzbXGmV
@0x01Brain ，现在使用 react-native 支持的 facebook.github.io/react-native/docs/0.57/…

【解决方案5】：

在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/…