在导航栏下反应本机导航状态栏

Question

我在我的项目中使用react-native-navigation库，我的状态栏出现了一些问题。首先是我无法在iOS上更改状态栏背景颜色，因此我为此创建了一个组件，如下所示：

const S_StatusBar = ({ backgroundColor, ...props }) => (
  <View style={[styles.statusBar, { backgroundColor }]}>
    <StatusBar translucent backgroundColor={backgroundColor} {...props} />
  </View>
);

const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : 
StatusBar.currentHeight;

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

我在我的所有屏幕上导入此组件如下：

      <View>
         <S_StatusBar backgroundColor="#090b4b" barStyle="light-content" />
      </View>

以下是我使用react-native-navigation库推送屏幕的方法：

pushProductDetailScreen = () => {
   this.props.navigator.push({
     screen: 'cfl.ProductDetail'
  });
};

屏幕被正确推送但现在我的问题是我的状态栏位于我的导航栏下面，如下所示：

我不明白这个问题及其发生的原因！

Answer 1

您正在创建一个封装内容的视图

<View style={[styles.statusBar, { backgroundColor }]}>
...
</View>

statusBar: {
  height: STATUSBAR_HEIGHT,
}

所以它确实创建了一个具有指定高度和backgroundColor

的视图

StatusBar是一个有点不同的组件。除了更改StatusBar的设置外，它不会渲染任何内容。

您应该可以从View本身配置它

<StatusBar
  backgroundColor="blue"
  barStyle="light-content"
/>

Answer 2

此样式对我有用

const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : 0;

class App extends Component {
  render() {
    return (
      <View style={[styles.container]}>
         <View style={[styles.statusbar]}>
           <StatusBar barStyle="dark-content"/>
         </View>
         <WebView
           style={[styles.webview]}
           source={{ uri: "https://..." }}
        />    
      </View>
    );  
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
  },
  statusbar: {
    height: STATUSBAR_HEIGHT,
  },
  webview: {
    flex: 1,
  }
});