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

【问题标题】：How to display an arrow in Horizontal Flat List to indicate presence of invisible scrollview contents如何在水平平面列表中显示箭头以指示存在不可见的滚动视图内容
【发布时间】：2019-03-17 09:44:35
【问题描述】：

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

【问题讨论】：

标签： android react-native react-native-android react-native-flatlist

【解决方案1】：

我通过在 FlatList 中添加更多视图来实现这一点。我在平面列表之前添加了线性渐变视图，从白色到部分透明的白色。同样在平面列表结尾处的翻转视图。 fir 线性渐变我使用了 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>

【讨论】：