android - 如何在水平平面列表中显示箭头以指示存在不可见的滚动视图内容

Question

在我的 ReactNative 应用程序中，我有一个 FlatList 将服务的可用性显示为时间线。在实现这一点时，屏幕上只有部分滚动视图可见。如何设置一个箭头指示器，让用户知道这个视图是一个滚动视图，并且有更多的内容可以滚动。

标签： androidreact-nativereact-native-androidreact-native-flatlist

Answer 1

我通过与 FlatList 一起添加更多视图来实现这一点。我在平面列表之前添加了线性渐变视图，从白色到部分透明的白色。同样在平面列表结尾处的翻转视图。冷杉线性梯度我使用了 react-native-linear-gradient。

最终渲染看起来像

<View style={{ flexDirection: 'row' }}>

    <LinearGradient
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 0 }}
        colors={["#FFFFFF00", "#FFFFFFFF"]}
        style={{
            height: "100%",
            width: 32,
        }}
    />

    <FlatList
        data={this.state.timeSlotes}
        renderItem={({ item, index }) => {
            return <TimeSloteItem data={item} />;
        }} />

    <LinearGradient
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 0 }}
        colors={["#FFFFFF", "#FFFFFF00"]}
        style={{
            height: "100%",
            width: 32,
        }}
    />
</View>