当道具更新时，React Native 组件不透明度不更新

Question

我有一个 React Native 子组件，如果disabled属性设置为 true，它会呈现一个处于半透明状态的按钮。 prop 可能会在应用程序最初加载后更新（一旦它获得了数据），因此不会是组件的初始状态。

我可以看到，一旦我与按钮交互，它就会改变它的状态，但由于某种原因，之前不会。 我可以从日志和onPress行为中看到道具正在更新。 我尝试了不同的方法，但似乎没有一个能解决问题。

class TestButton extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    const buttonOpacity = (this.props.disabled  ? disabledOpacity : 1.0);
    console.log ("test disabled", this.props.disabled, buttonOpacity);

    return (
      <BubbleText style={{opacity: buttonOpacity}} onPress={
        () => ! this.props.disabled && doSomething() }>
          { this.props.testNumber }
      </BubbleText>
    );
  }
}

Answer 1

设置 TouchableOpacity 按钮的不透明度似乎存在问题。 我正在使用 react-native@0.55.4。 如果设置了不透明度，然后更新了新渲染，即使它被传递给组件样式，它似乎也不会更改不透明度值。

使用TouchableOpacity有一种本机方法可以做到这一点。 如果使用disabled道具，这也可以从禁用所有新闻事件中受益。

<TouchableOpacity
    disabled={ this.props.is_disabled }
    activeOpacity={ this.props.is_disabled ? .6 : 1 }>
    <Text>Custom Button</Text>
</TouchableOpacity>

对上面的一个警告，设置activeOpacity似乎不会改变文本不透明度，只会改变 backgroundColor。

或者使用rgba值来指定不透明度确实有效。

export class CustomButton extends Component {

    get_button_style() {
        let _button_style = [this.props.button_style]

        if (this.props.is_disabled) {
            _button_style.push({
                backgroundColor: 'rgba(0, 0, 0, .6')
            });
        }

        return _button_style;
    }

    render() {
        return(
            <TouchableOpacity
                style= { this.get_button_style() }>
                <Text> Custom Button </Text>
            </TouchableOpacity>
        )
    }
}

Answer 2

似乎是一个已知问题https://github.com/facebook/react-native/issues/17105

一种解决方法是将 TouchableOpacity 的内容包装在一个视图中，并将不透明度样式应用于该视图，而不是直接应用于 Touchable 不透明度。

Answer 3

仅从代码片段很难说，问题可能出在使用这个的父组件中。 为此添加代码可能有助于确定问题所在。

抱歉没有足够的代表来添加评论。

Answer 4

底层组件是一个TouchableOpacity 。 在外部设置其不透明度似乎存在问题。 在这种情况下，我通过明确定义颜色解决了这个问题，而不是使用不透明度：

class TestButton extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
      return (
        <BubbleText fill={this.props.disabled ? disabledFill : undefined} textStyle={this.props.disabled ? {color: disabledText} : {}} onPress={
          () => ! this.props.disabled && loadTest(this.props.navigator, this.props.set + this.props.testNumber, this.props.children)
          }>
            { this.props.testNumber }
          </BubbleText>
          );

  }
}

在我代码的另一部分中，我添加了一个条件来将组件渲染为一个View ，如果禁用则为不透明度，否则为TouchableOpacity 。

Answer 5

使用 react-native-gesture-handler 中的 TouchableOpacity，它有一个名为 containerStyle 的道具，当“this.props.is_disabled”为 false 或 true 时，您的 TouchableOpacity 将自动更新不透明度。 没有它，您将需要重新启动应用程序以显示不透明度：

<TouchableOpacity onPress={() => {}} 
                    disabled={this.props.is_disabled} 
                    containerStyle={{
                        opacity: this.props.is_disabled ? 1 : .4,
                    }}
                    style={}>
                </TouchableOpacity>