我正在尝试使用 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>
它是样式:
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',
},
我设置了上下文本的背景颜色来查找问题,但我对此一无所知。
你能指导我解决这个问题吗?ಠ_ಠ
最佳答案
我给你举了个例子。看这个。你我之间没有差距。
我的 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>
)}
/>
);
}
}
关于android - react native : Blank space between FlatList rendered items,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57676132/