react native FlatList显示-顶部为空白

Question

当我初始化页面时，它显示如下。(照片如下(
它总是在屏幕上有一个空白(橙色的(，它包含在FlatList中。
(我使用了'<Text>1'来显示文本和平面列表之间没有空白。(
第一张照片

而且，当我向下滚动页面时，它会是这样的。(照片如下(
它可以过度显示橙色的地方，并查看右侧的滚动条。它不在顶部。所以我认为它在平面区域的顶部有空白
我用谷歌搜索了两天，但没有人像我一样有同样的问题…
有人知道空白是什么吗？以及如何禁用空白吗？
因为当第一个元素出现的时候，我想要它像是被分割的照片。
保密照片

我的react naitve：
react native cli:2.0.1
react native:0.57.5

var Arr = [{name:'河北省',},
{name:'山西省',},
{name:'辽宁省',},
{name:'吉林省',},
{name:'黑龙江省',},
{name:'江苏省',},
{name:'浙江省',},
{name:'福州省',}];
class Featured extends React.Component {
constructor(props) {
super(props);
this.state = {
peo: [
{ key: 'Devin' },
{ key: 'Jackson' },
{ key: 'James' },
{ key: 'Joel' },
{ key: 'John' },
{ key: 'Jillian' },
{ key: 'Jimmy' },
{ key: 'Julie' }
]
};
}
Cellheader(data){
alert(data.name);
}
//列表的每一行
renderItemView({item,index}){
return(
<TouchableOpacity style={{flex:1,
height:60,
backgroundColor:'orange',
}}
onPress={()=>{this.Cellheader(item)}}
>
<View style={{backgroundColor:'green',
height:59,justifyContent: 'center',
alignItems: 'center'}}>
<Text>{item.name}</Text>
</View>
</TouchableOpacity>
);
}
//定义页头
ListHeaderComponent(){
return(
<View style={{height:100,backgroundColor:'red',justifyContent: 'center',}}>
<Text>ListFooterComponent</Text>
</View>
);
}
//定义页脚
ListFooterComponent(){
return(
<View style={{height:40,backgroundColor:'yellow',justifyContent: 'center',}}>
<Text>ListHeaderComponent</Text>
</View>
);
}
render() {
for (var i = 0; i < Arr.length; i++) {
Arr[i]['key'] = i;
}
return (
<View style={styles.top}>
<View
style={{
height: 100,
backgroundColor: 'skyblue',
alignItems: 'flex-end',
justifyContent: 'flex-end'
}}
>
<TouchableOpacity style={styles.lnsertButton} underlayColor="#fff" onPress={this.onAddArray}>
<Text style={styles.submitText}>Insert</Text>
</TouchableOpacity>
</View>
<Text>1</Text>
<FlatList style={{backgroundColor:'orange',flex:1}}
data = {Arr}
ListHeaderComponent={this.ListHeaderComponent.bind(this)}
ListFooterComponent={this.ListFooterComponent.bind(this)}
renderItem={this.renderItemView.bind(this)}
>
</FlatList>
</View>
);
}
}
var styles = StyleSheet.create({
top: {
flex: 1
}
}

对不起，我的英语不是很好，请不要介意。

Answer 1

从renderItemView=>TouchableOpacity 中移除flex:1