我正在尝试创建一个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
似乎确实给出了预期的间距结果,但是它会导致一个不同的问题,即空白始终存在并在滚动时切断项目。任何帮助,将不胜感激!