react-native - 从 Android 移除 SafeAreaView

Question

我正在尝试将背景图像设置为整个屏幕区域，包括缺口。这是 iPhone 上的默认设置，但我无法在 Android 手机上实现。我使用的安卓手机是三星 Galaxy A-01，iPhone 是 iPhone XS。附上截图。

Android 截图（不好）

iPhone 截图（我也想在 Android 上实现）

更新 1：

以下是代码：

render() {
    const { roomId, nickName } = this.state;
    return (
      <>
        <StatusBar barStyle='light-content' translucent />

        <ImageBackground
          source={require('../../../assets/images/backgroundImage.png')}
          style={{ flex: 1, justifyContent: 'center', height: '100%' }}
          resizeMode='cover'>

          <KeyboardAvoidingView
            style={{ flexGrow: 1 }}
            enabled
            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
            <View
              style={{
                flex: 1,
                justifyContent: 'flex-end',
                alignItems: 'center',
                paddingHorizontal: 16,
                paddingVertical: 1,
                flexDirection: 'column',
                height: '100%',
              }}>
              <Image
                source={require('../../../assets/images/logo.png')}
                style={{ marginBottom: 50 }}
                resizeMode='contain'
              />

              <SafeAreaView
                style={{
                  height: '50%',
                  justifyContent: 'flex-end',
                  width: '100%',
                }}>
                <View
                  style={{
                    width: '100%',
                    justifyContent: 'flex-end',
                    marginBottom: 10,
                  }}>
                  <TextInput
                    ref={this.classIdRef}
                    style={{
                      width: '100%',
                      backgroundColor: '#fff',
                      height: 50,
                      borderRadius: 4,
                      marginBottom: 15,
                      paddingHorizontal: 15,
                    }}
                    placeholderTextColor='rgb(218, 218, 218)'
                    placeholder='Class ID'
                    value={roomId}
                    onChangeText={(text) => this.setRoomId({ roomId: text })}
                  />

                  <TextInput
                    ref={this.nicknameRef}
                    style={{
                      width: '100%',
                      backgroundColor: '#fff',
                      height: 50,
                      borderRadius: 4,
                      marginBottom: 20,
                      paddingHorizontal: 15,
                    }}
                    placeholder='Nickname'
                    placeholderTextColor='rgb(218, 218, 218)'
                    value={nickName}
                    onChangeText={(text) =>
                      this.setNickName({ nickName: text })
                    }
                  />

                  <TouchableOpacity
                    onPress={this.navigateToClassroomHandler}
                    style={{
                      backgroundColor: 'rgb(251, 158, 85)',
                      width: '100%',
                      height: 50,
                      justifyContent: 'center',
                      alignItems: 'center',
                      borderRadius: 4,
                    }}
                    disabled={roomId === '' || nickName === ''}>
                    <Text
                      style={{
                        fontSize: 18,
                        color: '#fff',
                        fontWeight: 'bold',
                      }}>
                      Attend Class
                    </Text>
                  </TouchableOpacity>
                </View>
              </SafeAreaView>
            </View>
          </KeyboardAvoidingView>
        </ImageBackground>
      </>
    );
  }