查看css直到顶部的苹果手机X

Question

苹果手机的屏幕截图 Iv'e 一直试图让我的视图背景颜色在 iPhone x 上一直到顶部，但仍然可以弄清楚如何做到这一点，我仍然在顶部有一个白色部分。

import React from 'react'
import { View, Text, ActivityIndicator, StyleSheet } from 'react- 
native'
import firebase from 'firebase';
export default class Loading extends React.Component {
 componentDidMount() {
  // firebase.auth().onAuthStateChanged(user => {
  //   this.props.navigation.navigate(user ? 'Main' : 'Login')
  // }) // for now to solve problem 
  } 
render() {
  return (
    <View style={styles.container}>
      <Text>Loading</Text>
      <ActivityIndicator size="large" />
    </View>
   )
 }
};
const styles = StyleSheet.create({
 container: {
 flex: 1,
 backgroundColor: '#2C3E50',
 justifyContent: 'center',
 alignItems: 'center',
}
});

我非常希望背景颜色也放在顶部

Answer 1

我没有运行您的代码，但我假设问题是 switchNavigator 显示一个标题。如果是这种情况，那么您需要更改您所在屏幕中导航器的颜色。

所以在你的加载类中：

export default class Loading extends React.Component {
    // Add this:
    static navigationOptions = {
        headerStyle: {
            backgroundColor: '#2C3E50',
        },
    };
    componentDidMount() {} 
    render() {
        return (
            <View style={styles.container}>
                <Text>Loading</Text>
                <ActivityIndicator size="large" />
            </View>
        )
    }
};

参考： https://reactnavigation.org/docs/en/headers.html#adjusting-header-styles

Answer 2

这可能是堆栈导航器的标头（概率很小）.. 或者可能带有"safeViewiOS"...这也可能是反应导航的问题。使用 flex：1 通常需要屏幕 acc 到 flex 属性 ..这肯定是继承的财产。不是 flex 或 CSS 的问题

尝试添加 ：

forceInset={{ bottom: 'never', top: "never" }}>