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

【问题标题】：Status bar adding extra padding React-native状态栏添加额外的填充 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>

我该如何解决？

【问题讨论】：

标签： javascript react-native statusbar

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：