React Native状态栏Status Bar – React Native实战教程

上一章React
Native实战教程请查看:React
Native选择器Picker

在本章中,我们将向你展示如何在React Native中控制状态栏Status Bar外观。

状态栏很容易使用,你需要做的就是设置属性来改变它。

隐藏属性可用于隐藏状态栏,在我们的例子中,它被设置为false,这是默认值。

barStyle可以有三个值——dark-content, light-content和default.。

该组件还有其他几个可以使用的属性,有些是Android或IOS特有的,你可以在官方文件中查到。

App.js

import React, {Component} from 'react';
import {StatusBar} from 'react-native';

const App = () => {
  return (
    <StatusBar
      barStyle="dark-content"
      hidden={false}
      backgroundColor="#00BCD4"
      translucent={true}
    />
  );
};
export default App;

如果我们运行应用程序,状态栏将是可见的,内容将是深色的。

输出

React Native状态栏Status Bar
微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?