Expo StatusBar
一个库，提供与 React Native StatusBar API 相同的界面，但默认值略有不同，可以在 Expo 环境中很好地工作。
expo-status-bar 为你提供了一个组件和命令式界面来控制应用状态栏以更改其文本颜色、背景颜色、隐藏它、使其半透明或不透明，并将动画应用于任何这些更改。你能够使用 StatusBar 组件执行哪些操作取决于你所使用的平台。
¥expo-status-bar gives you a component and imperative interface to control the app status bar to change its text color, background color, hide it, make it translucent or opaque, and apply animations to any of these changes. Exactly what you are able to do with the StatusBar component depends on the platform you're using.
Web 支持
¥Web support
网络上没有可用于控制操作系统状态栏的 API，因此
expo-status-bar将无操作，因此它不会执行任何操作并且不会出错。¥There is no API available on the web for controlling the operating system status bar, so
expo-status-barwill no-op, so it will do nothing and will not error.
安装
¥Installation
- npx expo install expo-status-barIf you are installing this in an existing React Native app (bare workflow), start by installing expo in your project. Then, follow the additional instructions as mentioned by library's README under "Installation in bare React Native projects" section.
用法
¥Usage
import { StyleSheet, Text, View } from 'react-native';
import { StatusBar } from 'expo-status-bar';
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.text}>Notice that the status bar has light text!</Text>
<StatusBar style="light" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#000',
alignItems: 'center',
justifyContent: 'center',
},
text: {
color: '#fff',
},
});
API
import { StatusBar } from 'expo-status-bar';
Component
StatusBar
Type: React.Element<StatusBarProps>
A component that allows you to configure your status bar without directly calling imperative
methods like setBarStyle.
You will likely have multiple StatusBar components mounted in the same app at the same time.
For example, if you have multiple screens in your app, you may end up using one per screen.
The props of each StatusBar component will be merged in the order that they were mounted.
This component is built on top of the StatusBar
component exported from React Native, and it provides defaults that work better for Expo users.
animated
Optional • Type: boolean
If the transition between status bar property changes should be
animated. Supported for backgroundColor, barStyle and hidden.
Optional • Type: boolean
If the status bar is hidden.
hideTransitionAnimation
Optional • Type: StatusBarAnimation • Default: 'fade'
The transition effect when showing and hiding the status bar using the hidden prop.
networkActivityIndicatorVisible
Optional • Type: boolean
If the network activity indicator should be visible.
style
Optional • Type: StatusBarStyle • Default: 'auto'
Sets the color of the status bar text. Default value is "auto" which
picks the appropriate value according to the active color scheme, eg:
if your app is dark mode, the style will be "light".
translucent
Optional • Type: boolean
If the status bar is translucent. When translucent is set to true,
the app will draw under the status bar. This is the default behaviour in
projects created with Expo tools because it is consistent with iOS.
Methods
StatusBar.setStatusBarBackgroundColor(backgroundColor, animated)
| Name | Type | Description |
|---|---|---|
| backgroundColor | string | The background color of the status bar. |
| animated | boolean |
|
Set the background color of the status bar.
void
| Name | Type | Description |
|---|---|---|
| hidden | boolean | If the status bar should be hidden. |
| animation (optional) | StatusBarAnimation | Animation to use when toggling hidden, defaults to |
Toggle visibility of the status bar.
void
StatusBar.setStatusBarNetworkActivityIndicatorVisible(visible)
| Name | Type | Description |
|---|---|---|
| visible | boolean | If the network activity indicator should be visible. |
Toggle visibility of the network activity indicator.
void
StatusBar.setStatusBarStyle(style, animated)
| Name | Type | Description |
|---|---|---|
| style | StatusBarStyle | The color of the status bar text. |
| animated (optional) | boolean | If the transition should be animated. |
Set the bar style of the status bar.
void
StatusBar.setStatusBarTranslucent(translucent)
| Name | Type | Description |
|---|---|---|
| translucent | boolean | Whether the app can draw under the status bar. When |
Set the translucency of the status bar.
void