标签内的React-Native Set响应式图标（本机基形式）

Question

嗨，我需要创建带有密码输入和掩码的表单。 所以我创建了带有标签+图标的floatinglabel。 单击该图标时，它将屏蔽/取消屏蔽密码。 我已经成功创建了标签+图标，但是我的问题是该图标没有响应，因为标签没有按钮/可触摸的。 如果我用按钮包装图标，它将给我错误文本内嵌套视图。 我也不能使用标签外的图标，因为它用于验证图标（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>;