react-native - 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: {},
});

这是它现在的样子。

标签： react-nativeflexboxscrollview

Answer 1

根据键盘隐藏和视图使 contentInset 成为动态的。根据您的设计设置 contentBottom 值。

解决方案中的值基于我的设计

     const [contentBottom, setContentBottom] = useState(0);

      <KeyboardAwareScrollView
          style={{
            flex: 1,
            backgroundColor: Color.white,
          }}
          keyboardOpeningTime={0}
          extraScrollHeight={150}
          enableResetScrollToCoords
          onKeyboardWillHide={() => setContentBottom(0)}
          onKeyboardWillShow={() => setContentBottom(200)}
          contentInset={{ bottom: contentBottom }}
      >