禁用react native按钮

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

当前回答

你可以启用和禁用按钮或使用条件或直接在默认情况下，它将是disable: true

 // in calling function of button 
    handledisableenable()
        {
         // set the state for disabling or enabling the button
           if(ifSomeConditionReturnsTrue)
            {
                this.setState({ Isbuttonenable : true })
            }
          else
          {
             this.setState({ Isbuttonenable : false})
          }
        }

<TouchableOpacity onPress ={this.handledisableenable} disabled= 
     {this.state.Isbuttonenable}>

    <Text> Button </Text>
</TouchableOpacity>

2018-10-13 09:26:36

其他回答

以下是我在这方面的工作，希望能有所帮助:

<TouchableOpacity
    onPress={() => {
        this.onSubmit()
    }}
    disabled={this.state.validity}
    style={this.state.validity ?
          SignUpStyleSheet.inputStyle :
          [SignUpStyleSheet.inputAndButton, {opacity: 0.5}]}>
    <Text style={SignUpStyleSheet.buttonsText}>Sign-Up</Text>
</TouchableOpacity>

在SignUpStyleSheet。inputStyle保存按钮禁用或未禁用时的样式，然后在style={this.state。有效性?SignUpStyleSheet。inputStyle: [SignUpStyleSheet.]如果按钮被禁用，我添加不透明度属性。

2018-09-08 20:54:06

使用禁用的true属性

<TouchableOpacity disabled={true}> </TouchableOpacity>

2020-12-26 15:29:01

你可以启用和禁用按钮或使用条件或直接在默认情况下，它将是disable: true

 // in calling function of button 
    handledisableenable()
        {
         // set the state for disabling or enabling the button
           if(ifSomeConditionReturnsTrue)
            {
                this.setState({ Isbuttonenable : true })
            }
          else
          {
             this.setState({ Isbuttonenable : false})
          }
        }

<TouchableOpacity onPress ={this.handledisableenable} disabled= 
     {this.state.Isbuttonenable}>

    <Text> Button </Text>
</TouchableOpacity>

2018-10-13 09:26:36

我认为最有效的方法是用一个视图包装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
  }

2019-08-26 09:02:25

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

2015-10-29 08:17:42

禁用react native按钮

推荐文章

最新文章

标签