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

Posted 2023-04-18

【中文标题】状态栏添加额外的填充 React-native

【英文标题】：Status bar adding extra padding React-native

【发布时间】：2020-03-19 18:31:18

【问题描述】：

我尝试向应用程序添加状态栏，它在 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>

我该如何解决？

【参考方案1】：

你不应该设置View 高度，它会增加额外的高度。您可以关注此文档 https://reactnavigation.org/docs/en/status-bar.html

【参考方案2】：

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

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