KeyboardAwareScrollView 有额外的底部填充吗？

Question

我已经有一段时间遇到这个问题了KeyboardAwareScrollView，它的底部有一些额外的填充（黄色）。在这里，我希望我的表单始终位于屏幕底部，看来此填充不允许这样做。

export const LoginView: React.FC = () => {
  return (
    <View style={styles.container}>
      <KeyboardAwareScrollView
        style={styles.scrollContainer}
        showsHorizontalScrollIndicator={false}
        showsVerticalScrollIndicator={false}
      >
        <View
          style={{
            justifyContent: "space-between",
            backgroundColor: "green",
          }}
        >
          <View style={styles.imageContainer}>
            <Image></Image>
          </View>
          <View style={styles.formConstainer}>
            <Formik></Formik>
          </View>
        </View>
      </KeyboardAwareScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollContainer: {
    backgroundColor: "yellow",
  },
  imageContainer: {
    alignItems: "center",
    justifyContent: "center",
  },
  formConstainer: {},
});

这是现在的样子。

Answer 1

只需将 KeyboardAwareScrollView 样式更改为 contentContainerStyle （这些样式将应用于包装所有子视图的滚动视图内容容器。）并添加 flex 到其中的视图。

       export const LoginView: React.FC = () => {
          return (
            <View style={styles.container}>
              <KeyboardAwareScrollView
                contentContainerStyle={styles.scrollContainer} //style changed to contentContainerStyle
                showsHorizontalScrollIndicator={false}
                showsVerticalScrollIndicator={false}
              >
                <View
                  style={{
                    justifyContent: "space-between",
                    backgroundColor: "green",
                    flex:1 //flex added
                  }}
                >
                  <View style={styles.imageContainer}>
                    <Image></Image>
                  </View>
                  <View style={styles.formConstainer}>
                    <Formik></Formik>
                  </View>
                </View>
              </KeyboardAwareScrollView>
            </View>
          );
        };
        
        const styles = StyleSheet.create({
          container: {
            flex: 1,
          },
          scrollContainer: {
            backgroundColor: "yellow",
            flexGrow:1 //added flexGrow
          },
          imageContainer: {
            alignItems: "center",
            justifyContent: "center",
            flex:2 //flex added
          },
          formConstainer: { 
            flex:1 //flex added
          },
        });