如何在水平滚动中提供空间，我想要最后一个单元格之后的空间

Question

在平面列表末尾右边填充和右边距无效，它在平面列表末尾后不显示空格，我正在使用水平平面列表

<FlatList
horizontal
contentInset={{right: 20}}
pagingEnabled={true}
showsHorizontalScrollIndicator={false}
data={item.listData}
renderItem={({item, index}) => {
var lastCell =
mainListData.length - 1 == index ? true : false;
var firstCell = index == 0 ? true : false;
console.log(firstCell, lastCell);
return (
<CategoryComponent
data={item}
onPress={() => {
this.props.navigation.navigate('RecipeList');
}}
isLastCell={lastCell}
isFirstCell={firstCell}
/>
);
}}
/>

类别组件返回样式下方

<TouchableOpacity
style={{
width: 'auto',
marginLeft: isFirstCell
? 0.064 * deviceWidth
: 0.043 * deviceWidth,
marginRight: isLastCell ? 0.064 * deviceWidth : 0
}}
onPress={onPress}>
<View style={styles.showCollectionnView}>
<Image source={data.image}
style={{
height: 144,
width: 144,
borderRadius: 10,
position: 'absolute'
}}/>
</View>
<Text style={styles.nameText}>{data.name}</Text>
<Text style={styles.otherText}>{data.recipes}</Text>
</TouchableOpacity>

Answer 1

你应该对平面列表使用 contentContainer 样式

<FlatList
contentContainerStyle={{paddingRight:100}}
//... other props
/>

您可以根据需要增加。