React-Native - 如何为 TouchableOpacity 组件创建禁用样式？

Question

如何为 TouchableOpacity 组件应用禁用样式？

 <TouchableOpacity
  style={styles.buttonWrapper }
  onPress={this.userLogin.bind(this)}
  disabled={ !this.state.username || !this.state.password }
>
  <Text style={styles.buttonText}>Login</Text>
</TouchableOpacity>

原文由 Fermín 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

最简单的方法是使用与禁用道具相同的条件。

这样的事情应该有效：

 style={!this.state.username || !this.state.password ? styles.disabled : styles.buttonWrapper}

原文由 Antoine Grandchamp 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

为 React-Native 或 React 中的元素禁用样式的最佳方法是这样的：

   style={
    (!this.state.username || !this.state.password)
    ? {...styles.buttonWrapper, ...styles.buttonDisabled}
    : styles.buttonWrapper
  }

实际操作： codesandbox

使用此示例，您不需要为按钮设置重复样式，您只需要定义禁用样式，例如 backgroundColor 或 color 中的禁用按钮 styles.buttonDisabled 。

原文由 Soroush Chehresa 发布，翻译遵循 CC BY-SA 4.0 许可协议