Question

我使用React native的水平FlatList并在其中使用ListItem和Native的Card来呈现我的List Items。它可以工作，但是项目之间的空间太大，我无法缩小它。

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

Answer 1

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

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

1 个答案: