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

TouchableOpacity接收activeOpacity。你可以这样做

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

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

这似乎是一种可以用高阶分量来解决的问题。我可能是错的，因为我自己也在努力100%地理解它，但也许它会对你有帮助(这里有几个链接)……

http://www.bennadel.com/blog/2888-experimenting-with-higher-order-components-in-reactjs.htm http://jamesknelson.com/structuring-react-applications-higher-order-components/

就这么做

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

TouchableOpacity扩展了TouchableWithoutFeedback，所以你可以只使用disabled属性:

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

React Native TouchableWithoutFeedback #禁用文档

新的可压API也有一个禁用选项:

<Pressable disabled={true}>
  {({ pressed }) => (
    <Text>I'm disabled</Text>
  )}
</Pressable>

我可以通过在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
}
})

这个土生土长的基础有一个解决方案:

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

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

<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.]如果按钮被禁用，我添加不透明度属性。

你可以启用和禁用按钮或使用条件或直接在默认情况下，它将是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>

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

要禁用文本，你必须在文本样式中设置不透明度:0，如下所示:

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

使用禁用的true属性

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

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

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

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

快乐Cooding

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

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

当输入与字符串不匹配时，您可以在TouchableOpacity中使用禁用道具

<TouchableOpacity disabled = { stringMatched ? false : true }>
    <Text>Some Text</Text>
</TouchableOpacity>

其中stringMatched是一个状态。