Android 和 React Native 顶部导航栏

Question

我想问你关于在下面的图片上选择的部分。

这部分的名称是什么？我如何在 React Native 中设置它的样式？现在我的 APK 有一个丑陋的白色条，我看不到电池或 WiFi 的电量。

Answer 1

有电池和时间的区域叫做status bar。在我见过的大多数情况下，状态栏的高度取决于来自 ReactNative 的 Platform 模块的平台。

之后，您可以将此高度传递给 <View> 并添加其他样式。

import { Platform, ... } from 'react-native'

...code...

const STATUS_BAR_HEIGHT = Platform.select({ ios: 20, android: 24 })

export default class MyComponent extends Component {

  ...code...

  render() {
    <View style={{ height: STATUS_BAR_HEIGHT, ...more styles here... }} />
    <View>

      ...code...

    </View>
  }
}