我使用 React Native 的水平 FlatList 并在其中使用 ListItem 和 Native 基础的 Card 来呈现我的列表项。
它有效，但项目之间的空间太大，我无法减少它。
这是 FlatList :
<FlatList
horizontal data={this.props.data}
showsHorizontalScrollIndicator={false}
keyExtractor={item => item.title}
renderItem={this.renderItem}
/>
这是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>
);
};
最佳答案
正是您将 ListItem 包裹在其中的 Card 导致了您所看到的大量填充。如果你删除它，你会发现卡片之间的距离要近得多。
然后，您可以将卡片包装在 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 - 如何减少水平平面列表中项目之间的空间，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54234313/