React Native TouchableOpacity不更新样式

Question

我对TouchableOpacity组件有一个奇怪的问题.我有一个MainButton组件,需要2个道具,item和disabled.根据disabled道具,我希望我的MainButton组件应用不同的样式.问题是TouchableOpacity组件重新渲染时不刷新样式.道具disabled在重新渲染时正确设置.

是什么让这个奇怪的是,如果我把它改成一个TouchableHeighlight它按预期工作.

有谁知道为什么？这是TouchableOpacity中的一个错误吗？

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

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

  <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”的作用，或者为什么使用在道具中传递的项目来首先更改道具，也没有足够的上下文。听起来您可以改进实现此方法的方式，如果您给我更多背景信息，我可能会提供帮助。