KeyboardAwareScrollView 有额外的底部填充？答案

【问题标题】：KeyboardAwareScrollView has extra bottom padding?KeyboardAwareScrollView 有额外的底部填充？
【发布时间】：2020-12-24 05:33:10
【问题描述】：

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-native flexbox scrollview

【解决方案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
          },
        });

【讨论】：

谢谢！屏幕末端之间仍有一点空间，但这应该没问题。
@jeremy 您也可以根据您的要求尝试“extraScrollHeight”，它对我有用。链接 - npmjs.com/package/react-native-keyboard-aware-scroll-view

【解决方案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 }}
      >

【讨论】：