禁用react native按钮

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

当前回答

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

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

2019-12-04 12:44:16

其他回答

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

2015-10-29 08:17:42

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

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

2015-10-29 21:22:46

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

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

2021-01-04 06:00:59

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

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

2019-12-04 12:44:16

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

2018-01-06 13:51:58

禁用react native按钮

推荐文章

最新文章

标签