React 原生可触摸不透明度不更新样式

Question

我对TouchableOpacity组件有一个奇怪的问题。我有一个MainButton组件，它需要 2 个道具，item和disabled道具。基于disabled道具，我希望我的 MainButton 组件应用不同的样式。问题是当TouchableOpacity组件重新渲染时，它不会刷新样式。道具disabled在重新渲染时正确设置。

奇怪的是，如果我将其更改为TouchableHeighlight它会按预期工作。

有谁知道为什么？这是可触摸不透明度中的错误吗？

import React, { Component } from 'react'
import UI from '../styles/ui'
import {
Text,
TouchableOpacity
} from 'react-native'
const ui = new UI()
const styles = ui.styles
class MainButton extends Component {
constructor (props) {
super(props)
this.state = {
disabled : props.disabled,
item: props.item
}
}
componentWillReceiveProps(props) {
this.setState({disabled:props.disabled})
}
render() {
var normalStyles = [styles.mainButton,styles.widthEighty]
var disabledStyle = [styles.mainButton,styles.widthEighty,styles.lowOpacity]
var correctStyles = this.state.disabled ? disabledStyle : normalStyles
console.log(this.state.disabled,'this.state.disabled ? ');
return (
<TouchableOpacity disabled={this.state.disabled} style={correctStyles} accessibilityLabel={this.state.item.name} onPress={this.state.item.onPress.bind(this)}>
<Text style={styles.mediumLabel}>{this.state.item.name}</Text>
</TouchableOpacity>
);
}
}
export { MainButton as default }

Answer 1

首先，我不认为传递disabled和item道具来陈述。 您可以直接以这种方式执行此操作，并摆脱构造函数以及componentWillReceiveProps。componentWillReceiveProps生命周期方法将很快被弃用，因此他们不鼓励使用它。

此外，如果可能，将事件处理程序与itemprops 分开。 这不是最好的方法

render () {
const { disabled, item, onPress } = this.props;
const { name } = item;
...
return (
...
<TouchableOpacity
disabled={disabled}
style={disabled ? disabledStyle : normalStyle}
accessibilityLabel={name}
onPress={onPress}
>
<Text style={styles.mediumLabel}>{name}</Text>
</TouchableOpacity>
...
); 
}

Answer 2

我想出的解决方法是使用

setOpacityTo(value)以更新画布。

我这样做componentDidUpdate()因为每当在组件中应用新样式时都会调用此生命周期方法。因此，我给<TouchableOpacity/>组件做了一个ref，并在样式发生变化时对其进行更新。

例：

import React, { Component } from 'react'
import UI from '../styles/ui'
import {
Text,
TouchableOpacity
} from 'react-native'
const ui = new UI()
const styles = ui.styles
class MainButton extends Component {
constructor (props) {
super(props)
this.state = {
disabled : props.disabled,
item: props.item
}
}
componentWillReceiveProps(props) {
this.setState({disabled:props.disabled})
}
componentDidUpdate() {
this.refs['touchable'].setOpacityTo(1.0);
}
render() {
var normalStyles = [styles.mainButton,styles.widthEighty]
var disabledStyle = [styles.mainButton,styles.widthEighty,styles.lowOpacity]
var correctStyles = this.state.disabled ? disabledStyle : normalStyles
console.log(this.state.disabled,'this.state.disabled ? ');
return (
<TouchableOpacity ref={'touchable'} disabled={this.state.disabled} style={correctStyles} accessibilityLabel={this.state.item.name} onPress={this.state.item.onPress.bind(this)}>
<Text style={styles.mediumLabel}>{this.state.item.name}</Text>
</TouchableOpacity>
);
}
}
export { MainButton as default }

Answer 3

如果使用不透明度样式(由 TouchableOpacity 使用)，则应为 TouchableOpacity(例如视图)的子项设置此样式，如下所示：

<TouchableOpacity
disabled={disabled}
accessibilityLabel={name}
onPress={onPress}
>
<View style={disabled ? disabledStyle : normalStyle}>
<Text style={styles.mediumLabel}>{name}</Text>
</View>
</TouchableOpacity>

Answer 4

我没有足够的上下文来准确理解您在这里尝试实现的目标，但请尝试以下操作：

<TouchableOpacity disabled={this.state.disabled} style={this.state.disabled ? disabledStyle : normalStyles} accessibilityLabel={this.state.item.name} onPress={this.state.item.onPress.bind(this)}>
<Text style={styles.mediumLabel}>{this.state.item.name}</Text>
</TouchableOpacity>

关于"this.state.item.onPress"的作用也没有足够的上下文，或者为什么你使用你在道具中传递的物品来改变道具。听起来你可以改进你实现它的方式，如果你给我更多的背景，我可能会提供帮助。