javascript - react-native FlatList 显示

问题描述

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

而且，当我向下滚动页面时，它会像这样。（照片如下）
它可以过度显示橙色的地方，并查看右侧的滚动条。它不在顶部。所以我认为它在平面列表区域的顶部有空白。
我用谷歌搜索了两天，但没有人像我一样遇到同样的问题......
有谁知道那是什么空白以及如何禁用该空白？
因为我希望它像第二张照片一样，当第一个元素出现时。
第二张照片

我的反应天真：
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
    }
}

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

标签： javascriptiosreact-nativereact-native-flatlist

javascript - react-native FlatList 显示 - 顶部的空白

问题描述

解决方案

推荐阅读