С помощью плоского списка я могу визуализировать элементы, которые прокручиваются по горизонтали, см. Изображение ниже:
Я бы хотел чтобы ограничить только 2 изображения с включенным разбиением на страницы. Я использую приведенный ниже код для отображения:
Просмотр:
<SafeAreaView style={styles.container}>
<Text style={styles.title}>Topics</Text>
<FlatList
contentContainerStyle={styles.bookslist}
pagingEnabled
horizontal
data={BookManager.getBooks()}
renderItem={renderCoverImage}
ItemSeparatorComponent={
() => <View style={{ width: 16, backgroundColor: 'clear' }} />
}
getItemLayout={(data, index) => ({ length: 50, offset: 50 * index + 30, index })}
/>
</SafeAreaView>
Стиль:
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center'
},
title: {
padding: 20,
fontWeight: '700',
fontSize: 22
},
bookslist: {
backgroundColor: '#00FF00',
paddingLeft: 20,
paddingRight: 20,
paddingTop: 0,
paddingBottom: 50
}
});
Я попробовал и заметил, что getItemLayout не работает. Я что-то упускаю?
Как я могу просто визуализировать 2 элемента, видимых одновременно. Если есть еще какие-либо элементы, я хочу go с опцией разбиения на страницы. Как установить стиль или getItemLayout для достижения?