更新道具时反应本机组件不透明度不更新

Posted 2023-02-21

【中文标题】更新道具时反应本机组件不透明度不更新

【英文标题】：React Native component opacity not updating when props updated

【发布时间】：2018-06-24 13:54:21

【问题描述】：

我有一个 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>
    );
  

【问题讨论】：

很难说是什么问题。 loadTest 是做什么的？

它加载了一个测试。为了清楚起见，我将其删除

你能改写你的问题吗？我已经阅读了 5 次，但我仍然不清楚发生了什么以及预期会发生什么。

您提供的代码中没有发生任何奇怪的事情，所以发生了其他奇怪的事情（如果发生了任何奇怪的事情）

@azium 已更新，谢谢

【参考方案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 似乎不会仅更改背景颜色的文本不透明度。

或者使用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>
        )
    

【讨论】：

另一种选择是将 TouchableOpacity 包装在视图中。然后在视图中设置不透明度。

【参考方案2】：

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

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

【讨论】：

哇，现在使用 RN 0.60.4，这个错误仍然存​​在。这种解决方法有效，但感觉很脏！谢谢。

【参考方案3】：

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

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

【讨论】：

添加了父组件。

您是否尝试过使用 componentWillRecieveProps 来查看测试按钮是否可以正常接收更新的道具？

是的，我相信如此，正如我所说，我还可以通过日志语句和 UI 的其他方面看到，例如onPress 行为。

【参考方案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。

【讨论】：

不知道这会导致问题。很高兴知道。很高兴你解决了它

【参考方案5】：

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

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