禁用react native按钮

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

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

小开

TouchableOpacity接收activeOpacity。你可以这样做

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

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

小开

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

小开

就这么做

<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也有一个disabled选项:

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

小开

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

禁用是react native中的一个道具，当你将它的值设置为“;true"它会使你的按钮失效

快乐Cooding

小开

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

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

小开

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

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

其中stringMatched是一个状态。


提交答案