標簽內的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>;