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

来源：1-9 自定义组件NavigationBar-3

LetsShare

2018-02-04

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

static navigationOptions = {

headerStyle:{

backgroundColor:'#458B74',

headerTitle:(

<View>

<StatusBar

backgroundColor={'#458B74'}

barStyle='light-content'/>

</View>

<Text style={{

fontSize:20,

color:'white',

}}>

{'Title'}

</Text>

</View>

)

}

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

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

写回答

2回答

CrazyCodeBoy

2018-02-13

也可以在_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>
        )
    }

CrazyCodeBoy

2018-02-05

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

A页面设置了StatusBar；
页面没有设置StatusBar；
A跳转到B，B会复用A的StatusBar；

解决办法：

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

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

LetsShare

我使用TabNavigator进行页面切换，每个页面设置一个StatusBar的颜色只在第一次tab页切换时，StatusBar会变换颜色。全部切换完毕后，再切换时，都保持最后一个页面的StatusBar的颜色？请问有没有方法能每次重新渲染StatusBar呢？

2018-02-05

共1条回复

React Native技术精讲与高质量上线App开发

一个真实的上线项目，一次完整的开发过程，全面掌握React Native技术

1577 学习 · 727 问题

查看课程

相似问题

react-navigation-redux-helpers什么情况使用？

回答 1

设置tabBaiIcon不管用，使用react-native-vector-icons

回答 1

android 上用了react-navigation tabNavigator就用不react-scrollable-tab-view请问是有冲突吗的

回答 1

男孩女孩玫瑰巧克力那个用react-navigation 不会写呀老师，那个navigator不能用了

回答 1

老师，IOS使用react-native-splash-screen时报错

回答 1

打开慕课网App查看更多内容