React Native 中不受 KeyboardAwareScrollView 影响的垂直居中图像

Question

好吧，这已经让我忙了好几个小时了。我正在尝试创建一个登录屏幕，其中主要组件呈现在底部，徽标位于剩余空间中。这就是我想要实现的目标：

为了支持我的文本输入，我使用 KeyboardAwareScrollView，因为它比 KeyboardAvoidingView 更适合我。我的代码目前如下所示（我计划使用具有 50% 颜色叠加的背景图像而不是红色背景，因此 ImageBackground 也必须保持在原位）：

  <ImageBackground
    source={require('./assets/img/background-clouds.png')}
    resizeMode="cover"
    style={styles.backgroundImage}>
    <View style={styles.backgroundOverlay} />
    <View style={styles.dummyView}>
      <Text>elloha</Text>
    </View>
    <Image
      source={require('./assets/img/logo.png')}
      style={styles.backgroundLogo}
      resizeMode="contain"
    />
    <KeyboardAwareScrollView
      keyboardShouldPersistTaps="always"
      keyboardOpeningTime={0}
      alwaysBounceHorizontal={false}
      alwaysBounceVertical={false}
      contentInsetAdjustmentBehavior="automatic"
      showsHorizontalScrollIndicator={false}
      showsVerticalScrollIndicator={false}
      automaticallyAdjustContentInsets={false}
      extraScrollHeight={30}
      enableOnAndroid>
      <StatusBar
        backgroundColor="transparent"
        barStyle="light-content"
        hidden={false}
        translucent
      />
      <TouchableWithoutFeedback
        onPress={Keyboard.dismiss}
        accessible={false}>
        <View style={styles.content}>
          <View style={styles.backgroundContainer}>
            <SafeAreaView style={{ flex: 0 }} />

            <View style={styles.loginContainer}>
              <View style={styles.loginScreen}>
                // textinputs and buttons go here
              </View>
              <SafeAreaView style={{ backgroundColor: 'white' }} />
            </View>
            <View
              style={{
                backgroundColor: 'white',
                height: Dimensions.get('window').height,
                position: 'absolute',
                width: Dimensions.get('window').width,
                top: Dimensions.get('window').height,
              }}
            />
          </View>
        </View>
      </TouchableWithoutFeedback>
    </KeyboardAwareScrollView>
  </ImageBackground>

相关款式：

const styles = StyleSheet.create({
  container: {
    backgroundColor: "white",
  },
  content: {
    flex: 1,
  },
  backgroundImage: {
    flex: 1,
    position: "absolute",
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    width: Dimensions.get("window").width,
    height: Dimensions.get("window").height,
  },
  backgroundContainer: {
    justifyContent: "flex-end",
    flex: 1,
    width: Dimensions.get("window").width,
    height: Dimensions.get("window").height,
  },
  backgroundOverlay: {
    backgroundColor: "red",
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  logoContainer: {
    top: "10%",
    width: "100%",
  },
  backgroundLogo: {
    alignSelf: "center",
    position: "absolute",
    width: 126,
    height: 96,
  },
  dummyView: {
    backgroundColor: "red",
    flex: 1,
  },
  loginContainer: {
    borderTopEndRadius: 30,
    borderTopStartRadius: 30,
    width: "100%",
    backgroundColor: "white",
    height: 500,
    alignItems: "center",
    paddingTop: Dimensions.get("window").width * 0.1,
  },
  loginScreen: {
    width: "80%",
    backgroundColor: "white",
  },
});

这会产生以下结果：

top: 160我可以通过添加到 backgroundLogo 样式来完成它，但这是一个固定值。我希望它始终位于可用空间的中心，但我无法在背景和登录容器之间添加视图，因为键盘等的所有逻辑都是在两者之间处理的。

有办法实现我想要的吗？理想情况下，我还应该能够检查可用高度，并且仅在有足够空间时才显示徽标（例如可用高度> 100，否则不显示徽标）。

重要提示：我希望徽标保持固定，因此如果显示键盘，徽标不应向上移动。登录容器应该“覆盖”徽标

编辑：

Answer 1

使用此样式将图像包裹在视图内，并指定 loginContainer 样式 height: '70%' ：

      ...
      <View style={styles.dummyView}>
        <Text>elloha</Text>
      </View>

      <View
        style={{
          justifyContent: 'center',
          alignItems: 'center',
          height: '30%',
          position: 'absolute',
          width: '100%',
        }}>
      <Image
        source={require('./assets/img/logo.png')}
        style={styles.backgroundLogo}
        resizeMode="contain"
      />
     </View>
     
     <KeyboardAwareScrollView
       keyboardShouldPersistTaps="always"
       ...


       ...
       loginContainer: {
         borderTopEndRadius: 30,
         borderTopStartRadius: 30,
         width: '100%',
         backgroundColor: 'orange',
         height: '70%',
         alignItems: 'center',
         paddingTop: Dimensions.get('window').width * 0.1,
       },
       ...