gpt4 book ai didi

react-native - 水平 FlatList 前后的间距(React Native)

转载 作者:行者123 更新时间:2023-12-04 05:05:09 25 4
gpt4 key购买 nike

我正在尝试创建一个水平 FlatList它周围有一些间距。我能够通过 paddingLeft 获得正确的开始间距在名单上,但paddingRight在列表上似乎没有在它后面放置任何空格(如果我一直滚动到最后,最后一个项目会紧贴边框)。

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

最佳答案

似乎我可以使用 contentContainerStyle 修复它FlatList 上的 Prop 而不是传递给它 style直接 Prop 。

关于react-native - 水平 FlatList 前后的间距(React Native),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53222081/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com