Блог

В моем реактивном приложении у меня есть плоский список, показывающий доступность сервиса в виде временной шкалы. При реализации этого на экране видна только часть scrollview. Как установить индикатор стрелки, чтобы пользователи знали, что это представление является scrollview и в нем есть больше содержимого для прокрутки.

Я добился этого, добавив еще несколько просмотров вместе с FlatList. Я добавил линейный градиентный вид, начиная с белого цвета и заканчивая частично прозрачным белым цветом, перед плоским списком. Также перевернутый вид того же самого в конце 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>