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

Question

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

这个问题在我的代码和React Navigation示例中都出现了。如何修复？谢谢。

- Pham Minh Tan

---

可能是React Native Expo StackNavigator overlaps Notification bar的重复问题。 - Michael Cheng

感谢@MichaelCheng。这是重复的。 - Pham Minh Tan

Answer 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 进行安装。

更多信息请参见 Expo 文档。

- Poptocrack

---

这在iOS上效果不太好。重复问题的已接受答案在两个平台上都更好，即marginTop: StatusBar.currentHeight。 - Richard Le Mesurier

根据React Native网站的说法，currentHeight（仅限Android）状态栏的高度。所以这个解决方案在iOS上似乎不起作用。 - Charlie Fish

@CharlieFish RN变化如此之快，但当我发表那个评论时，我正在iPhone 4c和Android Nexus 5上开发Expo应用，并且使用复制品获得了更好的体验。但这是我们为了好坏而努力工作的一项不断流动的技术。 - Richard Le Mesurier

对于iOS，请使用<SafeAreaView>。 - Rokas Devolskis

import Constants from 'expo-constants' - Alon Dahari

Answer 2

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

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

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

希望这能有所帮助。

顺便说一下，感谢此链接的贡献。

- Ahmad Khoja

Answer 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
  }
}

- Hinrich

Answer 4

在我的情况下，StatusBar 组件引起了这个问题。

将 translucent 属性设置为 false。

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

- nima

Answer 5

对我来说，这很简单，只需包含属性"headerStatusBarHeight"和我想要的值即可。

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

- Mariana Reis Silveira

Answer 6

如果您正在使用Expo，请尝试按照以下方式设置导航选项。

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

使用此方法，填充仅会在安卓平台上生效。 如需更多信息，请访问链接。

- Darren Lau

Answer 7

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

- pjehan

Answer 8

如果您正在使用Expo，您可以从expo core中使用Platform：

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

- MBehtemam