android - react native : Blank space between FlatList rendered items

Question

我正在尝试使用 FlatList 在应用程序中显示一些获取的数据。它有效，但项目之间有一个该死的大空间!

这是我的 FlatList 代码:

<View style={styles.showresp}>
                <FlatList
                    data={this.state.responsjson}
                    renderItem={({ item }) =>
                    <View style={styles.weatherview}>
                            <Text style={styles.city}>{item.name}</Text>
                            <Text style={styles.country}>{item.country}</Text>
                            <Text style={styles.temp}>{item.temp_c}</Text> 
                    </View>}/>
</View>

this is what i see in screen

它是样式:

showresp: {
    backgroundColor: '#fffa',
    height: 315,
    marginRight: '10%',
    marginLeft: '10%',
    marginTop: '15%',
    borderRadius: 15
},
 weatherview:{
        alignItems: 'center',
        justifyContent: 'center',
        flex :1
},
city: {
    fontFamily :'Wonderbar Demo',
    fontSize:40,
    color:'#880e4f',

},
country:{
    fontSize:20,
    fontFamily:'Samim-Bold',
    backgroundColor:'red',

},
temp:{
    fontFamily :'Wonderbar Demo',
    fontSize : 40,
    backgroundColor:'green',

},

我设置了上下文本的背景颜色来查找问题，但我对此一无所知。

你能指导我解决这个问题吗？ಠ_ಠ

Answer 1

我给你举了个例子。看这个。你我之间没有差距。

我的 parent 是扁平主义者。

您不必像这样将 View 放在一边。您可以将 View 放在您想要的项目中。

import React, { Component } from 'react';
import { View, Text, FlatList } from 'react-native';

const users = [
  {
    name: 'Cathy Gilliam',
    company: 'EXOVENT',
    email: 'cathygilliam@exovent.com',
  },
  {
    name: 'Norton Potts',
    company: 'COREPAN',
    email: 'nortonpotts@corepan.com',
  },
  {
    name: 'Kelly Collins',
    company: 'SECURIA',
    email: 'kellycollins@securia.com',
  },
];

export default class App extends Component {
  render() {
    return (
      <FlatList
        data={users}
        renderItem={({ item }) => (
          <View
            style={{
              borderBottomWidth: 1,
              borderBottomColor: 'grey',
              padding: 10
            }}>
            <View>
              <Text style={{ fontWeight: 'bold', fontSize: 18 }}>{item.name}</Text>
              <Text>{item.company}</Text>
              <Text>{item.email}</Text>
            </View>
          </View>
        )}
      />
    );
  }
}