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>

Answer 1

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

这样的事情应该有效：

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

Answer 2

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

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

查看实际操作： codesandbox

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