如何减少水平平面列表中的项目之间的间距

我使用 React native 的水平 FlatList 并在其中使用 ListItem 和 Card of Native base 来渲染我的列表项。它可以工作，但项目之间的空间太大，我无法减少它。

这是平面列表：

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

相关内容

最新更新

热门标签：