Javascript React本机导航中标题栏的页边距顶部

我是新来的。我正在使用React导航。但是，在我的设备上，标题导航有问题。此覆盖由状态栏显示，如下所示

---

此问题在我的代码和React Navigation showcase示例中都会出现。如何修复它？谢谢

您正在使用Expo，因此这种行为是正常的

static navigationOptions = {
  title: "Welcome",
  headerStyle: { marginTop: 24 },
}

您可以这样定义标题

大约一年后编辑：

使用Expo，您现在可以使用以下功能：

import Constants from 'expo-constants'

static navigationOptions = {
  title: "Welcome",
  headerStyle: { marginTop: Constants.statusBarHeight },
}

使用

expo安装expo常量安装它

---

更多信息

如果您正在使用expo，请尝试如下设置导航选项

navigationOptions:{
  headerStyle:{
    marginTop: (Platform.OS === 'ios') ? 0 : Expo.Constants.statusBarHeight }
  }
}

有了这个，填充只会在android平台上生效。

---

有关更多信息，请访问

这应该是您想要的

import {
  StyleSheet,
  View,
  Platform
} from 'react-native';
import { Constants } from 'expo';

const App = () => (
    <View style={styles.container}>
        // Your content with margin for statusBar goes here
    </View>
)

const styles = StyleSheet.create({
  container: {
    marginTop: Platform.OS === 'ios' ? 0 : Constants.statusBarHeight
  }
}

导入{
样式表，
看法
站台
}从“反应本机”；
从“expo”导入{Constants}；
常量应用=（）=>(
//带有状态栏边距的内容显示在此处
)
const styles=StyleSheet.create({
容器：{
marginTop:Platform.OS=='ios'？0:Constants.statusBarHeight
}
}

如果您使用的是Expo，您可以从

Expo core

使用

平台

，因此：

import { Constants } from "expo";
import { Platform } from "expo-core"; //inside of Platfrom from 'react-native'

然后创建一个样式表：

const styles = StyleSheet.create({
  container: {
   marginTop: Platform.OS === "ios" ? 0 : Constants.statusBarHeight
   }
});

---

我发现当运行在同一个问题上时，这很有用

export default StackNavigator({
    LoginScreen: { screen: Login.component }
}, {
    initialRouteName: 'LoginScreen',
    headerMode: 'none' // <------------- This line
})

导出默认堆栈导航器({
LoginScreen:{screen:Login.component}
}, {
initialRouteName:'LoginScreen'，
headerMode:'none'/对于Expo，您可以使用常量：

从“expo常量”导入常量；
const styles=StyleSheet.create({
容器：{
marginTop:Constants.statusBarHeight
},
});

您还可以使用ReactNative中的StatusBar组件：

从'react native'导入{StatusBar}；
const styles=StyleSheet.create({
容器：{
marginTop:StatusBar.currentHeight
},
});
在我的情况下，
状态栏将导致此问题

要解决这个问题：

<StatusBar
        animated={true}
        backgroundColor={Styles.statusBar.color}
        barStyle={barStyle}
        hidden={false}
        networkActivityIndicatorVisible={true}
        showHideTransition="fade"
        translucent={false} // <----------------- add false to translucent
      />


可能重复感谢@MichaelCheng。它是重复的。这在iOS上效果不太好。在两种平台上都更好，即
marginTop:StatusBar.currentHeight
@RichardLeMesurier根据
currentHeight（仅限Android）状态栏的高度
。因此该解决方案似乎无法在iOS上运行。@CharlieFish RN变化如此之快，但当我发表评论时，我正在iPhone 4c和Android Nexus 5上开发一个Expo应用程序，并获得了更好的复制体验。但这是一项我们正在为更好或更好而努力的每一项流动技术对于Ios使用
从“expo常量”导入常量