状态栏添加额外的填充 React-native

Question

我尝试向应用程序添加状态栏，它在 React-Navigation Header 上添加了额外的填充

状态条码

const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 30 : StatusBar.currentHeight;
const NotificationBar = ({ backgroundColor, ...props }) => ({
  ...(Platform.OS == 'ios' ? (
    <View style={{ backgroundColor, height: 30 }}>
      <StatusBar translucent backgroundColor={backgroundColor} {...props} />
    </View>
  ) : (
    <StatusBar translucent backgroundColor={backgroundColor} {...props} />
  )),
});

const styles = StyleSheet.create({
  statusBar: {
    height: STATUSBAR_HEIGHT,
  },
});

app.js

 <Provider store={store}>
      <NotificationBar
        backgroundColor={Colors.SAPrimaryx}
        barStyle="light-content"
      />
      <PersistGate persistor={persistor}>
        <RootRouter />
      </PersistGate>
 </Provider>

我该如何解决？

Answer 1

您不应该设置 View 高度，它会增加额外的高度。您可以按照此文档进行操作 https://reactnavigation.org/docs/en/status-bar.html

Answer 2

我没有添加状态栏，而是更改了状态栏内容的颜色

  <Provider store={store}>
      <StatusBar barStyle="dark-content" />
      <PersistGate persistor={persistor}>
        <RootRouter />
      </PersistGate>
    </Provider>

状态栏添加额外的填充 React-native

Status bar adding extra padding React-native

javascript

statusbar

react-native