如何减少水平平面列表中项目之间的空间答案

【问题标题】：How to reduce space between Items in horizontal Flatlist如何减少水平平面列表中项目之间的空间
【发布时间】：2019-06-11 13:23:24
【问题描述】：

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

这是平面列表：

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

【问题讨论】：

您是否尝试过定义自定义 ItemSeparatorComponent 并将其作为 FlatList 属性传递？
如何使用 ItemSeparatorComponent 减少空间？！我相信它是用来增加空间的。

标签： android reactjs react-native react-native-flatlist native-base

【解决方案1】：

正是您将Card 包裹在其中的ListItem 导致了您所看到的大量填充。如果您删除它，您会发现这些卡更靠近。

然后您可以将卡片包装在 TouchableOpacity 组件或类似组件中，这样您就可以进行触摸事件，还可以通过调整 @987654325 上的样式来更好地控制项目的空间@。

记得导入

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

【讨论】：

谢谢，这是删除空间的工作，但是当在列表上滚动时，项目会在触摸时突出显示。有什么办法可以禁用这个效果？
使用不同的触摸屏。 facebook.github.io/react-native/docs/…
谢谢。我使用 TouchableWithoutFeedback 并且运行良好。