我试图创建一个水平FlatList
,周围有一些间距.我可以在列表中正确地使用paddingLeft
开头的间距,但是列表中的paddingRight
后面似乎没有任何空格(如果我一直滚动到最后,最后一个项目就被压到了边框上).
这里有一个小吃,你可以跑go 现场试一试: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
似乎确实会产生预期的间距结果,但它会导致另一个问题,即空格始终存在,并在滚动时切断项目.任何帮助都将不胜感激!