禁用反应原生按钮答案

【问题标题】：Disabling buttons on react native禁用反应原生按钮
【发布时间】：2016-01-29 04:58:19
【问题描述】：

我正在使用 react native 制作一个 android 应用程序，并且我使用 TouchableOpacity 组件来创建按钮。
我使用文本输入组件来接受来自用户的文本，并且该按钮应该仅在文本输入与某个字符串匹配时才启用。
我可以想办法做到这一点，首先在没有 TouchableOpactiy 包装器的情况下渲染按钮，并在输入字符串匹配后使用包装器重新渲染。
但我猜有更好的方法来做到这一点。有人可以帮忙吗？

【问题讨论】：

标签： react-native

【解决方案1】：

TouchableOpacity extents TouchableWithoutFeedback，所以你可以只使用disabled 属性：

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

React Native TouchableWithoutFeedback #disabled documentation

新的Pressable API 也有一个disabled 选项：

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

【讨论】：

那么你有什么可以暗示它不适合你的东西吗？你用的是什么版本的 RN？你能给我们看一些代码吗？只需一个指向 RN 文档的链接即可帮助您：facebook.github.io/react-native/docs/…
请注意disabled 状态不会更改子渲染样式，因此为了使禁用状态对用户可见，您需要将样式应用于Text 元素，例如<Text style={{ opacity: 0.5 }}>I'm disabled</Text> -- 仅供参考
除了 Peter 在这里建议的之外，您还可以在触摸处于活动状态时更改按钮的不透明度级别（目前默认为 0.2）。 reactnative.dev/docs/touchableopacity#activeopacity

【解决方案2】：

就这样做

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

【讨论】：

<Text>{text}</FontText>?字体文本？
onPress 不期望布尔值
第二次按下会出现此错误。 TypeError: onPress is not a function. (In 'onPress(event)', 'onPress' is false) 不推荐解决方案。

【解决方案3】：

这似乎是可以使用高阶组件解决的问题。虽然我可能是错的，因为我自己 100% 都在努力理解它，但也许它会对你有所帮助（这里有几个链接）......

【讨论】：

【解决方案4】：

this native-base 有解决方案：

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

【讨论】：

【解决方案5】：

TouchableOpacity 接收activeOpacity。你可以这样做

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

所以如果启用，它看起来会正常，否则，它看起来就像 touchable withoutfeedback。

【讨论】：

但这仍然没有禁用它。只是不会改变触摸的不透明度。
您可以执行类似 onPress={@someMethod if enabled} 的操作。这样，您就不必将视图包装在不同的视图或可触摸对象中。

【解决方案6】：

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

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

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

快乐编程

【讨论】：

【解决方案7】：

要禁用文本，您必须在文本样式中设置 opacity:0，如下所示：

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

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

我可以通过在样式属性中添加条件来解决此问题。

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

【讨论】：

【解决方案11】：

这是我的解决方法，希望对您有所帮助：

<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 属性，如果按钮被禁用。

【讨论】：

【解决方案12】：

您可以启用和禁用按钮或使用条件或直接默认禁用：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>

【讨论】：

【解决方案13】：

使用禁用的真实属性

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

【讨论】：

【解决方案14】：

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

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

【讨论】：

欢迎来到 SO。尽管我们感谢您的回答，但如果它在其他答案之上提供额外的价值会更好。在这种情况下，您的答案不会提供额外的价值，因为 Fomahaut 已经提到了该解决方案。如果之前的答案对您有帮助，那么您应该在获得足够声誉后投票。

【解决方案15】：

当您的输入与字符串不匹配时，您可以在 TouchableOpacity 中使用 disabled 属性

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

其中 stringMatched 是一个状态。

【讨论】：