Question

我正在使用本机做一个Android应用程序，我使用了TouchableOpacity组件来创建按钮。
我使用文本输入组件来接受来自用户的文本，一旦文本输入与某个字符串匹配，该按钮应仅启用。
我可以通过最初渲染没有TouchableOpactiy包装器的按钮并在输入字符串匹配后使用包装器重新渲染来想办法。
但我猜测有更好的方法可以做到这一点。有人可以帮忙吗？

Answer 1

TouchableOpacity范围TouchableWithoutFeedback，因此您只需使用disabled属性：

<TouchableOpacity disabled={true}>
  <Text>I'm disabled</Text>
</TouchableOpacity>

React Native TouchableWithoutFeedback #disabled documentation

Answer 2

就这样做

<TouchableOpacity activeOpacity={disabled ? 1 : 0.7} onPress={!disabled && onPress}>
  <View>
    <Text>{text}</Text>
  </View>
</TouchableOpacity>

Answer 3

这似乎是使用高阶组件可以解决的问题。我可能错了，因为我很难100％自己理解它，但也许它会对你有帮助（这里有几个链接）......

Answer 4

TouchableOpacity收到activeOpacity。你可以做这样的事情

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

因此，如果它已启用，它将看起来正常，否则，它看起来就像touchablewithoutfeedback。

Answer 5

所以很容易在 react native 中禁用任何按钮

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

disabled 是 react native 中的一个道具，当您将其值设置为“true”时，它将禁用您的按钮

快乐编程

Answer 6

您可以使用TouchableWithoutFeedback构建CustButton，并使用onPressIn，onPressout或其他道具设置所需的效果和逻辑。

Answer 7

我能够通过在style属性中添加条件来解决这个问题。

const startQuizDisabled = () => props.deck.cards.length === 0;

<TouchableOpacity
  style={startQuizDisabled() ? styles.androidStartQuizDisable : styles.androidStartQuiz}
  onPress={startQuiz}
  disabled={startQuizDisabled()}
>
  <Text 
    style={styles.androidStartQuizBtn} 
  >Start Quiz</Text>
</TouchableOpacity>

const styles = StyleSheet.create({
androidStartQuiz: {
    marginTop:25,
    backgroundColor: "green",
    padding: 10,
    borderRadius: 5,
    borderWidth: 1
},
androidStartQuizDisable: {
    marginTop:25,
    backgroundColor: "green",
    padding: 10,
    borderRadius: 5,
    borderWidth: 1,
    opacity: 0.4
},
androidStartQuizBtn: {
    color: "white",
    fontSize: 24
}
})

Answer 8

这个原生基础有解决方案：

  <Button
    block
    disabled={!learnedWordsByUser.length}
    style={{ marginTop: 10 }}
    onPress={learnedWordsByUser.length && () => {
      onFlipCardsGenerateNewWords(learnedWordsByUser)
      onFlipCardsBtnPress()
    }}
  >
    <Text>Let's Review</Text>
  </Button>

Answer 9

使用以下代码禁用TouchableOpacity：

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

Answer 10

这是我的工作，希望对您有所帮助：

<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.validity ? SignUpStyleSheet.inputStyle : [SignUpStyleSheet.inputAndButton, {opacity: 0.5}]}中，如果按钮被禁用，则添加opacity属性。

Answer 11

您可以启用和禁用按钮，也可以使用条件或默认情况下直接将其禁用：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>

Answer 12

我认为最有效的方法是用视图包装touchableOpacity并添加带有样式条件的proppointerEvents。

<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
  }

Answer 13

要禁用文本，您必须按以下方式在文本样式中设置不透明度：0：

<TouchableOpacity style={{opacity:0}}>
  <Text>I'm disabled</Text>
</TouchableOpacity>

Answer 14

使用禁用的真实属性

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

Answer 15

这是有史以来最简单的解决方案：

您可以将 onPressOut 事件添加到 TouchableOpcaity 并做任何你想做的事。在 onPressOut 完成之前，它不会让用户再次按下

禁用按钮on native native

15 个答案: