Как уменьшить расстояние между объектами в горизонтальном плоском списке - PullRequest
Новая
       14

Как уменьшить расстояние между объектами в горизонтальном плоском списке

0 голосов
/ 17 января 2019

Я использую горизонтальный FlatList of React native и использую в нем ListItem и Card of Native для визуализации элементов списка. Это работает, но пространство между предметами слишком велико, и я не могу его уменьшить.

это 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>
      );
  };

1 Ответ

0 голосов
/ 21 января 2019

Это 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>
  );
}
...