Question

我正在尝试使用react-native创建具有多个输入字段的表单。我希望表单提交按钮保留在屏幕底部。我使用了以下结构

    <KeyboardAwareScrollView
      contentContainerStyle={{
        backgroundColor: "black",
        flexGrow: 1
      }}
      enableOnAndroid={true}
    >
      <View style={styles.container}>
        <View style={styles.formContainer}>
          {/*Form input components here*/}
        </View>
        <View style={styles.buttonContainer}>
          <Button
            icon={<Icon name="back" size={24} color="white" />}
            onPress={props.setModalVisible}
            buttonStyle={styles.backButton}
          />
          <Button
            buttonStyle={styles.button}
            containerStyle={{ flex: 1 }}
            title="Update Info"
            onPress={props.setModalVisible}
          />
        </View>
      </View>
    </KeyboardAwareScrollView>

容器具有样式

  container: {
    padding: 10,
    backgroundColor: "green",
    flex: 1
  },

表单容器具有样式

  formContainer: {
    padding: 15,
    flex: 1,
    backgroundColor: "blue"
  },

按钮容器具有样式

  buttonContainer: {
    padding: 15,
    flexDirection: "row",
    backgroundColor: "yellow",
    marginTop: 'auto'
  },

使用上面的代码，当没有键盘时，按钮将粘在底部。我添加了背景色以便于可视化。图片 - Form View

但是，当我单击文本字段并向上滚动时，我看到容器“收缩”，并且屏幕底部为黑色和button is now close to input fields。当我[完全滚动到底部] [3]时，KeyboardAwareScrollView contentContainerStyle的背景色填充底部

如何确保按钮仍停留在滚动视图的底部，并且内容容器的高度与屏幕高度相同？

我正在使用“ react-native-keyboard-aware-scroll-view”：“ 0.8.0”，

我尝试从buttonContainer中删除marginTop：'auto'，固定容器的高度以及在KeyboardAwareScrollView上使用flexGrow和flex进行的各种组合。

使用KeyboardAwareScrollView-React-native

0 个答案: