React Native：FlatList渲染项目之间的空白

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

我为你做了一个例子。看这个。你和我的区别是没有边际的。

我的父母是flatist。

您不必像这样将 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>
        )}
      />
    );
  }
}

Answer 2

它应该可以工作：

import * as React from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      responsjson: [{
        name: 'Name1',
        country: 'Country1',
        temp_c: '45'
      },
      {
        name: 'Name2',
        country: 'Country2',
        temp_c: '45'
      }]
    };
  }

  render() {
    return (
      <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>
    );
  }
}

const styles = StyleSheet.create({
  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',

  },
});

图片：