React-Native Set Responsive图标在Native-Base形式的标签内

Question

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

如何在标签标签内创建响应式图标(当用户触摸时)？还有没有其他方法，比如在输入中创建多个图标。

下面是我的代码：

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