Question

当我初始化页面时，它像这样显示。（照片在下面）
屏幕上总是有空白（橙色），该空白已包含在 FlatList 中。
（我使用' 1'来显示文本和平面列表之间没有空白。）
https://www.kernel.org/doc/Documentation/x86/x86_64/mm.txt

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

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

react-native FlatList显示-顶部空白

1 个答案: