导航栏下的反应原生导航状态栏答案

【问题标题】：React Native Navigation Status Bar under Navigation Bar导航栏下的反应原生导航状态栏
【发布时间】：2018-07-11 11:03:00
【问题描述】：

我在我的项目中使用 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'
  });
};

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

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

【问题讨论】：

这个问题你解决了吗？

标签： react-native react-native-android react-native-ios react-native-navigation

【解决方案1】：

这种样式适合我

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,
  }
});

【讨论】：

【解决方案2】：

你正在创建一个封装一些东西的视图

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

statusBar: {
  height: STATUSBAR_HEIGHT,
}

所以它确实创建了一个具有指定高度和背景颜色的视图

StatusBar 是一个有点不同的组件。它不会呈现任何内容，只会更改您的 StatusBar 的设置。

您应该能够从您的视图本身配置它

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

【讨论】：