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

Question

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

Answer 1

我通过添加更多 View 和 FlatList 来实现这一点。我在平面列表之前添加了线性渐变 View ，从白色开始到部分透明的白色。在 flatlist 的末尾也是相同的翻转 View 。 对于线性渐变，我使用了 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>