React Native Navigation中标题栏的保证金顶部

Question

我是React Native的新手。我正在使用React-Navigation。但是，在我的设备上有标题导航问题。这个覆盖状态栏就像这样。

我的代码和React Navigation展示示例都会出现此问题。怎么解决？感谢

Answer 1

您正在使用Expo，所以这种行为是正常的。

static navigationOptions = {
  title: "Welcome",
  headerStyle: { marginTop: 24 },
}

您可以像这样定义标题。

大约一年后编辑：

通过Expo，您现在可以使用它：

import { Constants } from 'expo'

static navigationOptions = {
  title: "Welcome",
  headerStyle: { marginTop: Constants.statusBarHeight },
}

Answer 2

这应该做您想要的。

Console.WriteLine(data)

Answer 3

在遇到相同问题时，我发现这很有用

export default StackNavigator({
    LoginScreen: { screen: Login.component }
}, {
    initialRouteName: 'LoginScreen',
    headerMode: 'none' <------------- This
})

只需在配置对象中添加headerMode：'none'

希望这会有所帮助

通过信用转到This Link

Answer 4

如果您正在使用世博会，请尝试像这样设置导航选项

navigationOptions:{
  headerStyle:{
    marginTop: (Platform.OS === 'ios') ? 0 : Expo.Constants.statusBarHeight }
  }
}

这样填充只会影响android平台。 有关详细信息，请访问link.

Answer 5

如果您正在使用Expo，则可以使用Platform中的expo core，如下所示：

import { Constants } from "expo";
import { Platform } from "expo-core"; //inside of Platfrom from 'react-native'

之后，创建样式表：

const styles = StyleSheet.create({
  container: {
   marginTop: Platform.OS === "ios" ? 0 : Constants.statusBarHeight
   }
});

Answer 6

使用Expo，您可以使用常量：

import Constants from 'expo-constants';

const styles = StyleSheet.create({
  container: {
    marginTop: Constants.statusBarHeight
  },
});

您还可以使用ReactNative中的StatusBar组件：

import { StatusBar } from 'react-native';

const styles = StyleSheet.create({
  container: {
    marginTop: StatusBar.currentHeight
  },
});

Answer 7

就我而言，StatusBar 会导致此问题。

解决这个问题：

<StatusBar
        animated={true}
        backgroundColor={Styles.statusBar.color}
        barStyle={barStyle}
        hidden={false}
        networkActivityIndicatorVisible={true}
        showHideTransition="fade"
        translucent={false} // <----------------- add false to translucent
      />