react-native - NativeBase + 指数标头

Question

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

有没有人可以解决这个问题？

Answer 1

由于此问题仅在 Android 中出现，因此建议的解决方法是专门使用Platform来针对 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。

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 行）

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 文档用于 StatusBar