NativeBase + 指数 Header

Question

我正在使用 NativeBase 和 Exponent。 Header 位于 phone 的状态栏下方。您可以在 Exponent 发布的 NativeBase 演示中看到这一点。

有人解决这个问题吗？

Answer 1

我最后添加了一个带有设备状态栏值的 marginTop。

import {
  StatusBar,
} from 'react-native'

在我的全局样式表中：

header: {
  marginTop: StatusBar.currentHeight,
}

Answer 2

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

Answer 3

由于此问题仅在 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 4

旧 post 但最近我在 Expo 上遇到了同样的问题。我通过将此行添加到 app.json 文件来解决这个问题。

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

app.json 文件

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

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

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

NativeBase + 指数 Header

NativeBase + Exponent Header

react-native

native-base

exponentjs