React Native Paper HelperText 在不可见时会占用空间答案

【问题标题】：React Native Paper HelperText consumes space when invisibleReact Native Paper HelperText 在不可见时会占用空间
【发布时间】：2021-06-27 16:55:48
【问题描述】：

我正在使用 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 会占用一个空间（我也检查过它，有一个空间），即使它是不可见的。

当它可见时：

当空白不可见时如何消除它？

【问题讨论】：

标签： react-native react-native-paper

【解决方案1】：

有条件地渲染它

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

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

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

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

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

【讨论】：

【解决方案2】：

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

 <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}

【讨论】：