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

Question

I'm new in React Native. I'm using React-Navigation. But, on my device has problem with header navigation. This overlay by status bar like this.

This issue occur both on my code and from React Navigation showcase example. How to fix it? Thanks

Answer 1

You are using Expo, so this behavior is normal.

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

You can define your header like this.

Edit about a year later:

With Expo, you can now use this:

import Constants from 'expo-constants'

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

Install it with expo install expo-constants

More informations here in the expo doc

Answer 2

I found this useful when running in the same problem

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

Just add headerMode: 'none' in the configuration object

Hope this helps

By the way Credit goes to This Link

Answer 3

This should do what you want.

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 4

If you are using expo, try to set the navigation options like this

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

With this the padding will only take affect in android platform. For more info you can visit link.

Answer 5

In my case, StatusBar will cause this problem.

to fix that:

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

Answer 6

If you are using Expo,you can use Platform from expo core so :

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

after that create an stylesheet:

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

Answer 7

With Expo, you could use Constants:

import Constants from 'expo-constants';

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

You can also use the StatusBar component from ReactNative:

import { StatusBar } from 'react-native';

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

Answer 8

For me, it was as simple as include the property " headerStatusBarHeight " with the value I wanted.

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