React Native Paper HelperText 在不可见时消耗 space

Question

我正在使用 React Native Paper 显示输入字段的错误消息，我正在使用 HelperText。这是我的代码：

      <TextInput
        mode="outlined"
        label="Password"
        placeholder="Password"
        value={Password}
        secureTextEntry={true}
        onChangeText={onChangePassword}
        style={{height: 40}}
      />
      <HelperText type="error" visible={isSubmit && PasswordValid()}>
        {password_message}
      </HelperText>

并且没有错误消息，它显示如下，helperText消耗了一个space（我也检查过它，有一个space）即使它是不可见的.

当它可见时：

白色 space 不可见时如何去除？

Answer 1

您可以根据错误的可见性设置动态样式，或尝试如下操作。根据您的需要更改保证金值

 <View style={{marginVertical:-3}}><HelperText type="error" visible={isSubmit && PasswordValid()}>
    {password_message}</View>

或

条件渲染。

{hasErrorVisible ?<View> <HelperText type="error" visible={isSubmit && PasswordValid()}>
  {password_message}
</HelperText></View> : null}

Answer 2

有条件地渲染它

{isTrue ? <HelperText type="error" visible={isSubmit && PasswordValid()}>
  {password_message}
</HelperText> : null}

在 isTrue 值为真之前，这不会将元素安装到视图，因此没有空 space。

在你的情况下你可以这样做

{isSubmit && PasswordValid() ? <HelperText type="error" visible={true}>
      {password_message}
    </HelperText> : null}

确保 isSubmit && PasswordValid() 是一个布尔值。

React Native Paper HelperText 在不可见时消耗 space

React Native Paper HelperText consumes space when invisible

react-native

react-native-paper