NativeBase + 指数标头答案

【问题标题】：NativeBase + Exponent HeaderNativeBase + 指数标头
【发布时间】：2017-02-07 19:20:44
【问题描述】：

我将 NativeBase 与 Exponent 结合使用。标题位于手机的状态栏下方。您可以在 Exponent 发布的 NativeBase 演示中看到这一点。

有人能解决这个问题吗？

【问题讨论】：

在项目上运行“yarn install”后，我的同样问题神秘地消失了

【解决方案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>

【讨论】：

迄今为止我找到的最佳答案！
请通过删除双括号来修正<View style={{styles.container}}>。您正在为样式分配一个对象，而不是就地声明一个对象。同行评审编辑必须至少 6 个字符长，因此我无法编辑它。
感谢瓦伦。非常适合我。

【解决方案2】：

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

import {
  StatusBar,
} from 'react-native'

在我的全局样式表中：

header: {
  marginTop: StatusBar.currentHeight,
}

【讨论】：

【解决方案3】：

旧帖子，但最近我遇到了与 Expo 相同的问题。我通过将此行添加到 app.json 文件来解决这个问题。

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

app.json 文件

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案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

【讨论】：