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;

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

输出