ReactNative——如何隐藏状态栏（实现沉浸式）

最新推荐文章于 2024-12-12 17:44:43 发布

原创最新推荐文章于 2024-12-12 17:44:43 发布 · 8.7k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#ReactNative #ReactNative隐藏状态栏

收录于

ReactNative 专栏收录该内容

4 篇文章

订阅专栏

本文介绍在React Native中如何简单有效地隐藏状态栏，通过在页面根布局顶部添加StatusBar组件并设置hidden属性为true实现。代码示例展示了具体的实现方式。

RN中隐藏状态栏的方式很简单，在页面的根布局的顶部添加一个StatusBar即可，设置相关属性如下：

<StatusBar

    backgroundColor='#ff0000'

    translucent={true}

    hidden={true}

    animated={true}/>

例如：

export default class MainPage extends Component {
    render() {
        return(
            <View style={{flex: 1}}>
                <StatusBar backgroundColor="#ff0000"
                           translucent={true}
                           hidden={true}
                           animated={true}/>
                <Text>HelloWord</>
            </View>
        )
    }
}