React Native常用小技巧总结

最新推荐文章于 2024-11-26 10:20:14 发布

原创最新推荐文章于 2024-11-26 10:20:14 发布 · 392 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#RN隐藏状态栏 #React Native隐藏状态栏

react-native 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何在React Native应用中隐藏状态栏，通过在页面布局的顶部添加StatusBar组件并设置hidden属性为true，实现状态栏的隐藏效果，适用于React Native开发者。

1、隐藏状态栏

在页面的根部局的顶部添加一个StatusBar即可，代码如下：

export default class WelcomeView extends Component<Props> {
  render() {
      const {navigate} = this.props.navigation;
    return (
      <View style={styles.container}>
          <StatusBar backgroundColor="#ff0000"
                     translucent={true}
                     hidden={true}
                     animated={true}/>
        <Text style={styles.welcome2}>Welcome to React Native!</Text>
      </View>
    );
  }
}