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

Question

我尝试实现水平和垂直滚动，如下所示：

滚动预览模拟。

水平滚动将特色内容显示为图像（应该是可点击的）。垂直滚动还有其他可点击的项目。

我的第一次尝试是使用两个均具有绝对位置的 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

在这里我可以垂直和水平滚动。我在安卓上测试过。

import React, { Component } from "react";
import { List, ListItem, Text } from "native-base";
import { View, ScrollView } from "react-native";

class Table extends Component {
    render() {
        return (
            <View>
                <ScrollView>
                <ScrollView horizontal={true}>
                    <List>
                    <ListItem>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                    </ListItem>
                    <ListItem>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                    </ListItem>
                    <ListItem>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                    </ListItem>
                    <ListItem>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                    </ListItem>
                    <ListItem>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                    </ListItem>
                    <ListItem>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                    </ListItem>
                    <ListItem>
                        <Text>COMEDY :</Text>
                        <Text>Hangover </Text>
                    </ListItem>
                    <ListItem>
                        <Text>COMEDY :</Text>
                        <Text>Hangover </Text>
                    </ListItem>
                    <ListItem>
                        <Text>COMEDY :</Text>
                        <Text>Hangover </Text>
                    </ListItem>
                    <ListItem>
                        <Text>COMEDY :</Text>
                        <Text>Hangover </Text>
                    </ListItem>
                    <ListItem>
                        <Text>COMEDY :</Text>
                        <Text>Hangover </Text>
                    </ListItem>
                    <ListItem>
                        <Text>COMEDY :</Text>
                        <Text>Hangover </Text>
                    </ListItem>
                    <ListItem>
                        <Text>COMEDY :</Text>
                        <Text>Hangover </Text>
                    </ListItem>
                    <ListItem>
                        <Text>COMEDY :</Text>
                        <Text>Hangover </Text>
                    </ListItem>
                    <ListItem>
                        <Text>COMEDY :</Text>
                        <Text>Hangover </Text>
                    </ListItem>
                    <ListItem>
                        <Text>COMEDY :</Text>
                        <Text>Hangover </Text>
                    </ListItem>
                    <ListItem>
                        <Text>COMEDY :</Text>
                        <Text>Hangover </Text>
                    </ListItem>
                    </List>
                </ScrollView>
                </ScrollView>
            </View>
        );
    }
}

export default Table;

Answer 2

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

看一下react-native-nested-scroll-view，它声称只适用于Android。我没有使用过它，但似乎它使用了本机NestedScrollView类。