我使用 React Native 的水平 FlatList 并使用 ListItem 和 Native 基础的 Card 来渲染我的列表项。 它可以工作，但项目之间的空间太大，我无法减少它。
这是 FlatList :
<FlatList
horizontal data={this.props.data}
showsHorizontalScrollIndicator={false}
keyExtractor={item => item.title}
renderItem={this.renderItem}
/>
这是渲染项目:
renderItem = ({ item }) => {
return (
<ListItem onPress={() =>
this.props.navigate(this.state.navigateTO,{
id:item['id'],
title:item['title'],
top_image:item['top_image'],
token:this.state.token,
lan:this.state.lan,
type:this.state.type,
}
)} >
<Card style={{height:320, width: 200}}>
<CardItem cardBody>
<Image source={{uri:item['top_image']}}
style={{height:200, width: 200}}/>
</CardItem>
<CardItem>
<Left>
<Body>
<Text >{item['title']}</Text>
<Text note>{item['city']} </Text>
</Body>
</Left>
</CardItem>
</Card>
</ListItem>
);
};
最佳答案
正是您将 Card 包装在其中的 ListItem 导致了您所看到的大量填充。如果你把它去掉，你会发现卡片靠得更近了。
然后，您可以将卡片包装在 TouchableOpacity 组件或类似组件中，这样您就可以进行触摸事件，并且还可以通过调整TouchableOpacity 上的样式。
记得导入
import { TouchableOpacity } from 'react-native';
这是更新 renderItem
renderItem = ({ item }) => {
return (
<TouchableOpacity onPress={() =>
this.props.navigate(this.state.navigateTO,{
id:item['id'],
title:item['title'],
top_image:item['top_image'],
token:this.state.token,
lan:this.state.lan,
type:this.state.type,
}
)}
style={{ padding: 10 }} // adjust the styles to suit your needs
>
<Card style={{height:320, width: 200}}>
<CardItem cardBody>
<View
style={{height:200, width: 200, backgroundColor:'green'}}/>
</CardItem>
<CardItem>
<Left>
<Body>
<Text >{item['title']}</Text>
<Text note>{item['city']}</Text>
</Body>
</Left>
</CardItem>
</Card>
</TouchableOpacity>
);
}
关于android - 如何减少水平 Flatlist 中项目之间的空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54234313/