无法更改状态栏颜色答案

【问题标题】：Can't change Statusbar color无法更改状态栏颜色
【发布时间】：2019-06-06 12:59:57
【问题描述】：

我正在尝试更改状态栏背景颜色。这就是我所拥有的：

componentDidMount(){
    this.makeRemoteRequest()
    this.renderBar()
}

这是渲染栏：

renderBar = () =>{
 return(
   <StatusBar
     backgroundColor="#553A91"
   />
 )
}

我尝试在此方法中更改状态栏颜色，因为我使用我的渲染方法在我的视图中有一个列表。这是我的渲染方法：

render(){
return(
  <List containerStyle={{borderTopWidth: 0, borderBottomWidth: 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}}
      />
    )}
    keyExtractor={item=>item.email}
    ItemSeparatorComponent={this.renderSeparator}
    ListHeaderComponent={this.renderHeader}
    />
  </List>
);
}

我尝试了没有用，如何更改我的状态栏颜色？

提前致谢！

【问题讨论】：

标签： react-native

【解决方案1】：

如果你真的想改变 render() 方法之外的状态栏颜色，react-native 提供了一个静态方法 StatusBar.setBackgroundColor 来做到这一点：

  componentDidMount() {
    this.makeRemoteRequest()
    StatusBar.setBackgroundColor('#553A91')
}

但是您应该对此保持谨慎，正如文档所述：

对于使用组件不理想的情况，还有一个命令式 API 在组件上作为静态函数公开。这是但是不建议使用静态 API 和组件相同的道具，因为静态 API 设置的任何值都会得到在下一次渲染中被组件设置的那个覆盖。

有关更多信息，请参阅状态栏documentation。

【讨论】：

【解决方案2】：

从“react-native”导入 {StatusBar}；

<StatusBar backgroundColor="Color here"/>

【讨论】：

我试过用render方法写，但是不行。