Question

您好我需要创建具有屏蔽密码输入的表单。所以我创建了带有标签+图标的浮动标签。单击图标时，它将屏蔽/取消屏蔽密码。我已经成功创建了标签+图标但我的问题是图标没有响应，因为标签没有按钮/可触摸。如果我用Icon包装Icon，它会在Text中给出错误嵌套视图。此外，我不能使用标签外的图标，因为它用于验证图标（X / O）

如何在Label标签内创建响应式图标（当用户触摸时）？或者是否有其他方式，例如在输入中创建多个图标。

这是我的代码：

<Label style={{top: 16}}>
  Password{" "}
  {password_mask && (
    /* If i wrap this icon with button it will gives a error */
    <Icon
      name="ios-eye"
      onPress={() => this.setState({ password_mask: false })}
      style={{top: 16}}
    />
  )}
  {!password_mask && (
    <Icon
      name="ios-eye-off"
      onPress={() => this.setState({ password_mask: true })}
      style={{paddingTop: 5}}
    />
  )}
</Label>

...谢谢

Answer 1

试试TouchableOpacity。你可以在里面渲染图标。你也可以做这样的优化。

 <Label style={{ top: 16 }}>
Password{" "}
<TouchableOpacity
    onPress={() =>
        this.setState({ password_mask: !this.state.password_mask })
    }
>
    <Icon
        name={this.state.password_mask ? "ios-eye" : "ios-eye-off"}
        style={this.state.password_mask ? { top: 16 } : { paddingTop: 5 }}
    />
</TouchableOpacity>
</Label>;

React-Native在Native-Base表单中的标签内设置响应图标

1 个答案: