如何减少水平 Flatlist 中项目之间的 space

Question

我使用React native 的水平FlatList 并使用其中的ListItem 和Native base 的Card 来呈现我的List Items。它有效，但项目之间的 space 太大，我无法减少它。

这是平面列表：

<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>
      );
  };

Answer 1

您将 Card 包裹在 ListItem 中，导致您看到大量填充。如果你移除它，你会发现卡片靠得更近了。

然后您可以将卡片包装在 TouchableOpacity 组件或类似组件中，这样您就可以拥有触摸事件，还可以让您更好地控制项目的 space通过调整 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>
  );
}

如何减少水平 Flatlist 中项目之间的 space

How to reduce space between Items in horizontal Flatlist

android

reactjs

react-native

react-native-flatlist

native-base