NativeBase + Exponent标头

Question

我使用带有Exponent的NativeBase。标题位于手机的StatusBar下方。您可以在Exponent发布的NativeBase演示中看到这一点。

有没有人对此有解决方法？

Answer 1

由于此问题仅出现在Android中，因此建议的解决方法是使用平台专门定位Android：

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

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

        }
})

其中container是应用程序中的主要容器。

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

Answer 2

我最后添加了一个marginTop和设备的StatusBar值。

import {
  StatusBar,
} from 'react-native'

在我的全局样式表中：

header: {
  marginTop: StatusBar.currentHeight,
}

Answer 3

旧帖子，但最近我在世博会上遇到了同样的问题。我通过将这一行添加到app.json文件中来解决了这个问题。

  

“ androidStatusBar”：{“ backgroundColor”：“＃000000”}

app.json文件

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

那解决了我的问题。我认为这可能对其他人有帮助。

Answer 4

我找到了一个更好的方法来处理这个使用StyleProvider和我的主题，然后进入de components文件夹（native-base-theme / components）找到Header.js文件并更改paddintTop值（大约305行）< / p>

Answer 5

有一个针对此问题的简单解决方案 只需导入StatusBar组件并使用以下标记即可：

<StatusBar hidden />

例如在页面中

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

此组件可与expo和react-native-cli最新版本配合使用。 要获得更多帮助，您可以使用ReactNative docs for StatusBar