когда я инициализировал страницу, она показала вот так (фото внизу)
у него всегда есть пустое место (оранжевое) на экране, которое было включено в FlatList .
(я использовал ' 1', чтобы показать, что между текстом и плоским списком нет пробелов.)
первое фото
И, когда я прокручиваю страницу вниз, это понравится. (фото внизу)
может отобразить оранжевое место и посмотреть на полосу прокрутки справа.это не на вершине.Так что я думаю, что в верхней части списка плоских списков есть пробел.
У меня был Google в течение двух дней, но ни у кого нет такой же проблемы, как у меня ...
Кто-нибудь знал, что это за пробел и какотключить этот пробел?
потому что я хочу, чтобы это было как на второй фотографии, когда появляется первый элемент.
вторичное фото
Моя реакция:
реакция-нативный-Cli: 2.0,1
реакция-нативный: 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
}
}
Извините, мой английский не очень хорош, пожалуйста, не возражайте.