為什么“react-native-elements”的輸入會超出模態視窗？

我正在使用一個表單來更改用戶名、電子郵件和密碼。

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

這顯示在使用 name 和 email 欄位正常作業的模態Overlay中，每個欄位'react-native-elements' 只有 2"Inputs"個，但更改密碼欄位有 3 個"Inputs"： 'CURRENT PASSWORD'、'NEW PASSWORD'和新密碼的'CONFIRMATION ' .

第一個螢屏截圖是有兩個欄位的表單在第二個螢屏截圖中，表單中有3個欄位，由于某種原因，新密碼的第三個"Input"'confirmation'顯示在外面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%"
  },

uj5u.com熱心網友回復：

覆寫高度設定為固定值。我：e 200 像素。將疊加層高度值更改為auto，這樣它將根據疊加層所具有的內容根據需要占用高度。

此外，將 設定為max-height覆寫和（僅在需要時而不是總是顯示滾動條）。這意味著一旦覆寫層達到其設定的最大高度值，滾動條就會開始出現。overflowauto

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

標籤：javascript css 反应式 覆盖 反应原生元素

上一篇：Javascript專案中的if-else邏輯實作

下一篇：為什么在鍵入接受函式的高階函式引數時鍵入“函式”不起作用？