NativeBase + Exponent Header

问题

I'm using NativeBase with Exponent. The Header goes beneath the phone's StatusBar. You can see this in the NativeBase demo that Exponent released.

Does anyone have a fix for this?

回答1:

Since this issue only comes up in Android, the recommended way to fix this would be to target Android specifically using Platform :

import {Platform, StatusBar} from 'react-native'

const styles = StyleSheet.create({
    container: {
            flex: 1,
            ...Platform.select({
                android: {
                    marginTop: StatusBar.currentHeight
                }
            })

        }
})

Where container is the main container in the app.

<View style={styles.container}>
 // rest of the code here
</View>

回答2:

I ended up adding a marginTop with the value of the device's StatusBar.

import {
  StatusBar,
} from 'react-native'

In my global stylesheet:

header: {
  marginTop: StatusBar.currentHeight,
}

回答3:

Old post but recently I've faced same issue with Expo. And I overcome this issue by adding this line to app.json file.

"androidStatusBar": { "backgroundColor": "#000000" }

app.json file

{
  "expo": {
    "name": "You App Name",    
    "androidStatusBar": {
      "backgroundColor": "#000000"
    }
  }
}

That solved my issue. I think this may help to others.

回答4:

I found a better way to handle this using the StyleProvider with my theme, and then into de components folder (native-base-theme/components) found the Header.js file and change the paddintTop value (around 305 line)

回答5:

There is a simple solution for this problem just import StatusBar component and use this tag:

<StatusBar hidden />

for example in a page:

/*
  Page with no statusbar
*/
import React, {Component} from 'react'
import {Platform, View, Text, StatusBar} from 'react-native'

export default class App extends React.Component{
  render(){
    return(
        <View>
        <StatusBar hidden />
         <Text> Hello World </Text>
        </View>
    );
  }
}

This Component work well with expo and react-native-cli latest virsions. for more help you can use ReactNative docs for StatusBar

来源：https://stackoverflow.com/questions/42098186/nativebase-exponent-header

标签

react-native

native-base

exponentjs