react-native FlatList显示-顶部空白

Question

when i initialize the page, it was showing like these.(photo is bellow)
it's alway has the blank space(orange one) on the screen,which was include in the FlatList .
(I used the '< Text > 1 ' to showing there is no blank between text and flatlist.)
first photo

And,when i scroll down the page, it will like this.(photo is bellow)
it can over display the orange place, and look at the scroll bar on the right. it's not on the top. So i think it has the blank on the top of the flatlist area.
I had Google it for two days, but no one has same issue like me...
Did anyone know what the blank is that and how to disable that blank?
because i want the it like the seconed photo, when the first element showing up.
seconed photo

My 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
    }
}

Sorry, My English isn't very good, please don't mind.

Answer 1

从renderItemView => TouchableOpacity删除flex：1