使用react-navigation的StackNavigator时，怎么配合使用StatusBar？

Question

请教一下，为了达到沉浸式的效果，我需要把StatusBar的颜色和导航颜色设置成一样，如下代码

static navigationOptions = {

headerStyle:{

backgroundColor:'#458B74',

},

headerTitle:(

<View style={{alignSelf:'center'}}>

<View>

<StatusBar

backgroundColor={'#458B74'}

barStyle='light-content'/>

</View>

<Text style={{

fontSize:20,

color:'white',

}}>

{'Title'}

</Text>

</View>

)

}

但是在Android环境中，其它没有设置StatusBar的页面的状态栏也被染色了。

这个问题还有没有其他比较好解决方式？

Answer 1

CrazyCodeBoy 2018-02-13 19:25:40

也可以在_renderTab方法中来监听当前选中是哪个tab，然后修改这个tab的statusbar：

 _renderTab(Component, selectedTab, title, renderIcon) {
        return (
            <TabNavigator.Item
                selected={this.state.selectedTab === selectedTab}
                selectedTitleStyle={this.state.theme.styles.selectedTitleStyle}
                title={title}
                renderIcon={() => <Image style={styles.image}
                                         source={renderIcon}/>}
                renderSelectedIcon={() =><Image style={[styles.image,this.state.theme.styles.tabBarSelectedIcon]}
                                                source={renderIcon}/>}
                onPress={() => this.setState({selectedTab: selectedTab})}>
                <Component {...this.props} theme={this.state.theme}/>
            </TabNavigator.Item>
        )
    }

Answer 2

CrazyCodeBoy 2018-02-05 11:07:14

问题分析：在RN中StatusBar会传递的，也就是说：

• A页面设置了StatusBar；

• 页面没有设置StatusBar；

• A跳转到B，B会复用A的StatusBar；

解决办法：

• 设置B页面的StatusBar，将其设置为默认样式即可；

return <View style={{flex: 1, backgroundColor: "gray",}}>
    <StatusBar
        barStyle='dark-content'/>
        ...

• 提问者 LetsShare #1

  我使用TabNavigator进行页面切换，每个页面设置一个StatusBar的颜色
  <TabNavigator.Item 
    ...
    <View style={{flex:1}}>
      <StatusBar backgroundColor={颜色1}/>
    </View>
  </TabNavigator.Item>
  <TabNavigator.Item 
    ...
    <View style={{flex:1}}>
      <StatusBar backgroundColor={颜色2}/>
    </View>
  </TabNavigator.Item>
  <TabNavigator.Item 
    ...
    <View style={{flex:1}}>
      <StatusBar backgroundColor={颜色3}/>
    </View>
  </TabNavigator.Item>
  只在第一次tab页切换时，StatusBar会变换颜色。全部切换完毕后，再切换时，都保持最后一个页面的StatusBar的颜色？请问有没有方法能每次重新渲染StatusBar呢？