为什么 'react-native-elements' 的 Input 会超出 Modal Window？

Question

我正在使用一个表单来更改用户名、电子邮件和密码。

所有元素均来自'react-native-elements'、Button、Icon和Input。

这显示在使用 'react-native-elements' 的 Overlay 创建的模式中名称和电子邮件字段工作正常，每个字段只有 2 "Inputs"，但更改密码字段有 3 "Inputs"： 'CURRENT PASSWORD', 'NEW PASSWORD' AND the 'CONFIRMATION' 新密码。

第一个截图是有两个字段的表单在第二个屏幕截图中，表单中有 3 个字段的屏幕截图，由于某种原因，新密码的 'confirmation' 的第三个 "Input" 显示在 Modal 之外，这使得它变得困难区分它并在尝试更改密码时导致问题。

.

这会阻止我继续进行该项目，直到我修复它，因为这是非常糟糕的用户体验。

它有一些非常简单的样式，我整个周末都在试图解决这个问题，却没有找到任何解释。

因为我知道第三个 "Input" 在 Modal 之外 ?

我希望这段代码足以让你告诉我我做错了什么

这是模态组件

 <Overlay
      isVisible={isVisible}
      overlayStyle={globalStyles.overlay}
      onBackdropPress={() => setVisible(false)}   // when we press outside, we exit the MODAL
    >
***Styles***
overlay: {
    height: 200,
    width: "90%",
    backgroundColor: "#fff",
    borderColor: "#22aabe",
    borderWidth: 2,
    borderRadius: 10
  },

// 在这里我显示表格

return (   // show the form on the screen
    <View style={globalStyles.viewChangeEmail}>
      <Input
        placeholder="Current password..."
        containerStyle={globalStyles.inputChangeEmail}
        defaultValue={currentPassword}
        onChange={(e) => setCurrentPassword(e.nativeEvent.text)}
        errorMessage={errorCurrentPassword}
        password={true}
        secureTextEntry={!showPassword}
        rightIcon={
          <Icon
            type="material-community"
            name={showPassword ? "eye-off-outline" : "eye-outline"}
            iconStyle={{ color: "#c2c2c2" }}
            onPress={() => setShowPassword(!showPassword)}
          />
        }
      />
      <Input
        placeholder="your new password..."
        containerStyle={globalStyles.inputChangeEmail}
        defaultValue={newPassword}
        onChange={(e) => setNewPassword(e.nativeEvent.text)}
        errorMessage={errorNewPassword}
        password={true}
        secureTextEntry={!showPassword}
        rightIcon={
          <Icon
            type="material-community"
            name={showPassword ? "eye-off-outline" : "eye-outline"}
            iconStyle={{ color: "#c2c2c2" }}
            onPress={() => setShowPassword(!showPassword)}
          />
        }
      />
      <Input
        placeholder="Ingresa tu confirmación de nueva contraseña..."
        containerStyle={globalStyles.inputChangeEmail}
        defaultValue={confirmPassword}
        onChange={(e) => setConfirmPassword(e.nativeEvent.text)}
        errorMessage={errorConfirmPassword}
        password={true}
        secureTextEntry={!showPassword}
        rightIcon={
          <Icon
            type="material-community"
            name={showPassword ? "eye-off-outline" : "eye-outline"}
            iconStyle={{ color: "#c2c2c2" }}
            onPress={() => setShowPassword(!showPassword)}
          />
        }
      />
      <Button
        title="Change Password"
        containerStyle={globalStyles.btnContainerChangePassword}
        buttonStyle={globalStyles.btn}
        onPress={onSubmit}
        loading={loading}
      />
    </View>
  )

  viewChangeEmail: {
    alignItems: "center",
    paddingVertical: 10
  },

  inputChangeEmail: {
    marginBottom: 10
  },

   btnContainerChangePassword: {
    width: "95%"
  },

Answer 1

覆盖高度设置为固定值。 i:e 200 像素。将overlay的高度值改为auto，这样会根据overlay的内容，根据需要占用高度。

此外，将 max-height 设置为覆盖，将 overflow 设置为 auto（仅在需要时显示滚动条，但并非总是如此）。这意味着一旦叠加层达到其设置的 max-height 值，滚动条就会开始出现。

overlay: {
  height: auto,
  max-height: 300px or [some other value],
  overflow: auto,
  width: "90%",
  backgroundColor: "#fff",
  borderColor: "#22aabe",
  borderWidth: 2,
  borderRadius: 10
},

为什么 'react-native-elements' 的 Input 会超出 Modal Window？

Why does the Input of 'react-native-elements' go out of the Modal Window?

javascript

css

overlay

react-native

react-native-elements