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”的功能或为什么要使用要传递的道具以首先更改道具的原因，也没有足够的上下文。听起来，您可以改善实现此方法的方式，如果您给我更多的上下文，我可能会提供帮助。

Answer 2

首先，我不认为可以通过disabled和item道具来说明。您可以通过这种方式直接进行操作，并摆脱构造函数和componentWillReceiveProps的困扰。 componentWillReceiveProps生命周期方法将很快被弃用，因此他们不鼓励使用它。

如果可能的话，还可以将事件处理程序与item道具分开。这不是最好的方法

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 3

我想出的解决方法是使用

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 4

如果您使用 opacity 样式（通过TouchableOpacity使用），则应为TouchableOpacity的子级（例如View）设置这种样式，如下所示：

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

React Native TouchableOpacity不更新样式

4 个答案: