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

这应该做你想要的。

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

Answer 3

我发现这在运行同样的问题时很有用

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

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

希望这可以帮助

顺便说一下Credit到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
   }
});