14

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

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

有谁知道为什么？这是 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 }
4

4 回答 4

1

我想出的解决方法是使用

setOpacityTo(value)为了更新画布。

我这样做componentDidUpdate()是因为只要在组件中应用了新样式，就会调用此生命周期方法。所以我给了<TouchableOpacity/>组件 aref并在它的样式发生变化时更新它。

例子：

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 }
于 2019-09-06T11:29:09.503 回答
1

首先，我不认为将disabledanditem道具传递给状态。您可以直接以这种方式进行操作，并摆脱构造函数以及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>
    ...
  ); 
}
于 2019-08-21T03:25:41.220 回答
1

如果您使用不透明样式（由 TouchableOpacity 使用），您应该为 TouchableOpacity（例如视图）的子级设置此样式，如下所示：

<TouchableOpacity
  disabled={disabled}
  accessibilityLabel={name}
  onPress={onPress}
>
  <View style={disabled ? disabledStyle : normalStyle}>
    <Text style={styles.mediumLabel}>{name}</Text>
  </View>
</TouchableOpacity>
于 2020-10-14T05:03:32.797 回答
0

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

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

于 2018-06-20T21:01:18.797 回答