React Native Navigation中标题栏的边距顶部答案

【问题标题】：Margin Top for Header Bar in React Native NavigationReact Native Navigation中标题栏的边距顶部
【发布时间】：2017-07-18 15:10:29
【问题描述】：

我是 React Native 的新手。我正在使用反应导航。但是，在我的设备上，标题导航有问题。像这样按状态栏叠加。

这个问题出现在我的代码和 React Navigation 展示示例中。如何解决？谢谢

【问题讨论】：

React Native Expo StackNavigator overlaps Notification bar的可能重复
感谢@MichaelCheng。重复了

标签： javascript react-native react-navigation

【解决方案1】：

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

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

你可以这样定义你的标题。

大约一年后编辑：

有了 Expo，你现在可以使用这个了：

import Constants from 'expo-constants'

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

用expo install expo-constants安装它

更多信息here in the expo doc

【讨论】：

这在 iOS 上效果不佳。 Accepted answer to the duplicate 在两个平台上效果更好，即marginTop: StatusBar.currentHeight
@RichardLeMesurier 根据React Native site currentHeight (Android only) The height of the status bar。因此，该解决方案似乎不适用于 iOS。
@CharlieFish RN 变化如此之快，但当我发表评论时，我正在 iPhone 4c 和 Android Nexus 5 上开发 Expo 应用程序，并获得了更好的复制体验。但无论好坏，我们都在努力研究这种无处不在的技术。
对于 Ios 使用
import Constants from 'expo-constants'

【解决方案2】：

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

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

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

希望对你有帮助

顺便说一句，信用转到This Link

【讨论】：

【解决方案3】：

这应该做你想做的。

import {
  StyleSheet,
  View,
  Platform
} from 'react-native';
import { Constants } from 'expo';

const App = () => (
    <View style={styles.container}>
        // Your content with margin for statusBar goes here
    </View>
)

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

【讨论】：

【解决方案4】：

如果您使用的是 expo，请尝试像这样设置导航选项

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

这样填充只会在android平台上生效。欲了解更多信息，您可以访问link.

【讨论】：

【解决方案5】：

对我来说，只需将属性“headerStatusBarHeight”包含在我想要的值中即可。

const  defaultHeaderConfig = {
    headerStatusBarHeight: 20,
    headerTintColor: "white",
    headerStyle:{
        backgroundColor: "blue"
    }
}

【讨论】：

【解决方案6】：

在我的情况下，StatusBar 会导致这个问题。

解决这个问题：

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

【讨论】：

【解决方案7】：

如果你使用 Expo，你可以使用 Platform from expo core so :

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

【讨论】：

【解决方案8】：

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

【讨论】：