react-native - SafeAreaView 放在背景上后不占用整个屏幕

Question

我正在使用 RN 0.59。每次我将应用程序放在后台然后立即重新打开它时，SafeAreaView 不会占用整个屏幕。

但是，如果我将应用程序放在后台并在一段时间后（大约 3 秒）重新打开它，它工作正常。

这是我在 SafeAreaView 上的片段

...
const SafeAreaViewUI = ({children}) => {
  return (
      <SafeAreaView style={styles.container}>
        <View style={styles.content}>
          { children }
        </View>
      </SafeAreaView>
  );
};

...
export default SafeAreaViewUI;

对于我的造型

container: {
    flex: 1,
    backgroundColor: Platform.OS === 'android' ? blurple : null,
    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
  },
  content: {
    flexGrow: 1,
    color: text,
    backgroundColor: white,
  }

对此有任何见解吗？

标签： react-nativesafeareaview

Answer 1

这对我有用。

const SafeAreaViewUI = ({children}) => {
  const [ height, setHeight ] = useState(0)
  return (
      <SafeAreaView 
        onLayout={() => {
          if (Platform.OS === 'android') {
            setHeight(StatusBar.currentHeight || 0);
          }
        }}
        style={[styles.container, { paddingTop: height }]}>
        <View style={styles.content}>
          { children }
        </View>
      </SafeAreaView>
  );

如果还有其他可能的答案。请张贴在这里。谢谢！