代码之家 › 专栏 › 技术社区 › Adamski

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

mobx jsx react-native javascript

Adamski · 技术社区 · 6 年前

我有一个React原生子组件,如果 disabled 道具设置为true。道具可能会在应用程序初始加载后更新(一旦获得数据),因此不会更新组件的初始状态。

我可以看到,一旦我与按钮交互,它就会改变其状态,但由于某种原因,以前不会。从日志和 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>
    );
  }
}

5 回复 | 直到 6 年前

kgstew 5 年前

设置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>
        )
    }
}

Pnar Sbi Wer 6 年前

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

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

Nemi Shah 6 年前

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

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

Adamski 6 年前

基础组件是 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 如果禁用,则具有不透明度,并且 可触摸不透明度 如果没有。

Otavio 4 年前

使用react native手势处理程序中的TouchableOpacity,它有一个名为containerStyle的道具,当“this.props.is\u disabled”为false或true时,TouchableOpacity将自动更新不透明度。没有它,您将需要重新启动应用程序以显示不透明度:

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