react-native - 在 React Native 中使用 ScrollViews 水平和垂直滚动

Question

我尝试实现水平和垂直滚动，如下所示:
ScrollPreviewMock .
水平滚动将特色内容显示为图像(应该是可点击的)。垂直滚动还有其他可点击的项目。
我的第一次尝试是使用两个均具有绝对位置的 ScrollView，但水平 ScrollView 会消耗所有触摸事件(即使在添加 pointerEvents={"box-none"} 之后)。
这就是我在那种情况下尝试的:

import React, { Component } from "react";
import { Dimensions, ScrollView, Text, StyleSheet, View } from "react-native";
const DimensionsWindowWidth = Dimensions.get("window").width;

export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>
                <ScrollView horizontal={true} style={styles.scrollView}>
                    <View style={styles.slide}>
                        <Text>H1</Text>
                    </View>
                    <View style={styles.slide}>
                        <Text>H2</Text>
                    </View>
                    <View style={styles.slide}>
                        <Text>H3</Text>
                    </View>
                </ScrollView>
                <ScrollView pointerEvents={"box-none"} style={styles.scrollView}>
                    <View style={styles.item}>
                        <Text>V1</Text>
                    </View>
                    <View style={styles.item}>
                        <Text>V2</Text>
                    </View>
                    <View style={styles.item}>
                        <Text>V3</Text>
                    </View>
                    <View style={styles.item}>
                        <Text>V4</Text>
                    </View>
                </ScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    slide: {
        padding: 100,
        width: DimensionsWindowWidth,
        height: "100%"
    },
    scrollView: {
        position: "absolute",
        width: "100%",
        height: "100%"
    },
    item: {
        margin: 40,
        height: 100
    }
});

(也可作为零食: https://snack.expo.io/Hyb7x-qQQ)
我的第二次尝试是使用 PanResponder 并在 onPanResponderMove 方法中使用 ScrollViews scrollTo 方法。但是似乎我必须实现所有 ScrollView 特殊功能，例如平滑滚动并自行反弹。
有什么想法可以在同时拥有水平背景和垂直滚动中的项目可点击的情况下解决这个问题吗？

Answer 1

在 IOS 中，您可以简单地将嵌套的 ScrollView 用于此类行为，但在 Android 中，您将需要其他东西。

看看react-native-nested-scroll-view声称仅适用于Android。我没用过，但好像用了原生 NestedScrollView类(class)。