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
          },
        });

Answer 2

将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 }}
      >

KeyboardAwareScrollView 有额外的底部填充吗？

KeyboardAwareScrollView has extra bottom padding?

scrollview

flexbox

react-native