状态栏与标题之间的差距

Question

我的状态栏与我的应用内的搜索栏之间存在奇怪的差距。 这是它的样子： 到目前为止，这是我的代码：

     renderHeader = () =>{
    return <SearchBar
    placeholder="Type here..."
    placeholderTextColor="#553A91"
    containerStyle={{backgroundColor: "#553A91", }}
    lightTheme
    round
    clearIcon={{color: "#553A91"}}
    textInputRef="search"
    icon={{color: "#553A91"}}
    autoCorrect={false}
    returnKeyType="go"
    selectionColor="#553A91"
    color="#553A91"
    />
  };


  render(){
    return(
      <View>
      <MyStatusBar backgroundColor="#553A91" barStyle="light-content" />
      <List containerStyle={{borderTopWidth: 0, borderBottomWidth: 0, marginTop: 0}}>
      <FlatList
      data={this.state.data}
      renderItem={({item})=>(
        <ListItem
        roundAvatar
        title={`${item.name.first} ${item.name.last}`}
        subtitle={item.location.city}
        avatar={{uri: item.picture.thumbnail}}
        containerStyle={{borderBottomWidth: 0, borderTopWidth: 0}}
        />
      )}
      keyExtractor={item=>item.email}
      ItemSeparatorComponent={this.renderSeparator}
      ListHeaderComponent={this.renderHeader}
      />
      </List>
      </View>
    );
  };

在renderHeader中我从react-native-elemnts创建搜索栏。

我试图添加填充/边距等来尝试修复此差距，但没有运气。 我做错了什么，我该如何解决？

编辑：我通过将borderTopWidth: 0添加到平面列表来稍微修正了这个差距，但我仍然有一个小差距。有什么建议吗？