Интервал до и после горизонтального FlatList (React Native)
Я пытаюсь создать горизонтальный FlatList с некоторым промежутком вокруг него. Мне удалось получить правильный начальный интервал с paddingLeft в списке, но paddingRight в списке, похоже, не помещает после него никакого пробела (если я прокручиваю до конца, последний элемент нажимается прямо напротив границы ).
Вот закуска, чтобы вы могли пробежать и попробовать вживую: https://snack.expo.io/@saadq/aW50cm
А вот мой код:
import * as React from 'react';
import { Text, View, FlatList, StyleSheet } from 'react-native';
const data = [{ key: 1 }, { key: 2 }, { key: 3 }, { key: 4 }];
class App extends React.Component {
render() {
return (
<View style = {styles.container}>
<FlatList
style = {styles.flatList}
horizontal
data = {data}
renderItem = {() => (
<View style = {styles.box}>
<Text>Box</Text>
</View>
)}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
flatList: {
marginTop: 100,
paddingLeft: 15,
paddingRight: 15, // THIS DOESN'T SEEM TO BE WORKING
// marginRight: 15 I can't use marginRight because it cuts off the box with whitespace
},
box: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: 50,
width: 100,
borderWidth: 1,
borderColor: 'black',
paddingHorizontal: 15,
marginRight: 15,
},
});
export default App;
Использование marginRight вместо paddingRight, похоже, дает ожидаемый результат с интервалом, однако это вызывает другую проблему, когда этот пробел ВСЕГДА присутствует и обрезает элементы при прокрутке. Любая помощь будет оценена по достоинству!
Ответы 6
Вы можете использовать ListFooterComponent. Это опора Flatlist и действует как последний компонент Flatlist. Таким образом, вы можете передать ему пустой вид шириной, например, 15, чтобы получить правильное поле для работы. Попробуй это:
<FlatList
style = {styles.flatList}
horizontal
data = {data}
renderItem = {() => (
<View style = {styles.box}>
<Text>Box</Text>
</View>
)}
ListFooterComponent = {<View style = {{width:15}}></View>}
Важная строка кода такова:
ListFooterComponent = {<View style = {{width:15}}></View>
Спасибо .. я должен признать, что ваш подход, вероятно, чище. Мой больше похож на обходной путь. Но если он работает, то это хорошо :)
Я пробовал это - отличная идея, но при повторном отображении списка вид теряется.
Похоже, я смог исправить это, используя опору contentContainerStyle на FlatList вместо того, чтобы напрямую передавать ей опору style.
Если вы ищете опору в документации, вы не найдете ее на FlatList. FlatList наследует реквизит ScrollView, поэтому вы найдете его там
Вы можете настроить contentInsets для FlatList, SectionList, ScrollView с помощью свойства contentInsets. https://facebook.github.io/react-native/docs/scrollview#contentinset
Например.
<FlatList
data = {...}
renderItem = {...}
horizontal = {true}
contentInset = {{ right: 20, top: 0, left: 0, bottom: 0 }}
/>
contentContainerStyle = {{paddingBottom:xxx}}
<FlatList
// extraData = {this.props.x}
contentContainerStyle = {{paddingBottom: 10, paddingTop: 8}}
data = {contacts}
removeClippedSubviews = {false}
keyExtractor = {(item, index) => index.toString()}
// onRefresh = {false}
renderItem = {({item}) => (
<View
style = {{
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
// margin: 3,
marginVertical: 5,
marginHorizontal: 4,
// borderWidth: 1,
// borderColor: '#d6d7da',
borderRadius: 7,
// padding: 1,
// borderRightWidth: 1, borderRightColor: '#d6d7da'
}}>
<Text>HOLA</Text>
</View>
)}
/>
Я использую такой подход для решения проблемы:
ItemSeparatorComponent = {() => <View style = {{ width: 35 }} />}
Интересный подход. Мне удалось решить эту проблему, просто используя другую опору (
contentContainerStyle), но я ценю ответ, проголосовали за!