我正在使用react native制作一个android应用程序,我已经使用TouchableOpacity组件来创建按钮。 我使用一个文本输入组件来接受来自用户的文本,并且该按钮只应该在文本输入匹配某个字符串时启用。 我可以想到一种方法来做到这一点,即最初呈现按钮而不使用TouchableOpactiy包装器,并在输入字符串匹配后使用包装器重新呈现。 但我猜有更好的办法。有人能帮忙吗?


当前回答

你可以用TouchableWithoutFeedback构建一个CustButton,并设置你想要的onPressIn, onpresout或其他道具的效果和逻辑。

其他回答

我认为最有效的方法是用一个视图包装touchableOpacity,并添加带有样式条件的道具pointerEvents。

<View style={this.state.disabled && commonStyles.buttonDisabled}        
      pointerEvents={this.state.disabled ? "none" : "auto"}>
  <TouchableOpacity
    style={styles.connectButton}>
  <Text style={styles.connectButtonText}">CONNECT </Text>
  </TouchableOpacity>
</View>

CSS:

buttonDisabled: {
    opacity: 0.7
  }

这里有一个最简单的解决方案:

你可以在TouchableOpcaity中添加onPressOut事件 做你想做的事。 它不会让用户再次按,直到onPressOut完成

TouchableOpacity接收activeOpacity。你可以这样做

<TouchableOpacity activeOpacity={enabled ? 0.5 : 1}>
</TouchableOpacity>

如果它被启用,它看起来会很正常,否则,它看起来就像touchable没有反馈。

你可以用TouchableWithoutFeedback构建一个CustButton,并设置你想要的onPressIn, onpresout或其他道具的效果和逻辑。

因此,在react native中禁用任何按钮是非常容易的

<TouchableOpacity disabled={true}>
    <Text> 
          This is disabled button
   </Text>
</TouchableOpacity>

Disabled是react native中的一个道具,当你将它的值设置为“true”时,它将禁用你的按钮

快乐Cooding