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
  } 

見實戰： codeandbox

用這個例子，你不需要有你只需要定義殘疾風格像按鈕重復的樣式backgroundColor或color為禁用的按鈕styles.buttonDisabled 。