当组件在本机反应中重新呈现时，动态不透明度不会改变

Question

我开始学习 React Native，并为我的项目创建了一个简单的 Button 组件以在我的项目中重用。我根据变量 'disabled' 动态设置不透明度值，但是，按钮的外观并没有随着不透明度变量的值而改变。找了一圈也没找到解释..
任何帮助将不胜感激。

这是我的源代码：

import React from 'react'
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
import PropTypes from 'prop-types'

//TODO: arrumar o problema com a opacidade
export default function Button({text, onPress, style, disabled, textStyle}) {
    let opacity = disabled === true ? 0.5 : 1
    // console.log('opacity', opacity)
    return (
        <TouchableOpacity onPress={onPress} style={[defaultStyles.button, style, {opacity: opacity}]} 
            disabled={disabled}>
            <Text style={[defaultStyles.text, textStyle]}>{text}</Text>
        </TouchableOpacity>
    )

}

const defaultStyles = StyleSheet.create({
    text: {
        color: 'white'
    },
    button: {
        backgroundColor: 'black',
        margin: 15,
        padding: 15,
        borderRadius: 10
    },
})

Button.propTypes = {
    text: PropTypes.string,
    onPress: PropTypes.func,
    style: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.array,
        PropTypes.object
    ]),
    disabled: PropTypes.bool,
    textStyle: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.array,
        PropTypes.object
    ])
}

编辑：这是调用按钮的代码

class NewDeck extends Component {

    state={
        title: null
    }

    submit = () => {
        const { add, goBack } = this.props
        let deck = {...this.state}
        if(!deck['deckId']){
            deck['deckId'] = Date.now()
            deck['logs'] = []
        }

        !deck['cardsId'] && (deck['cardsId'] = [])

        add(deck).then(() => {
            this.props.navigation.navigate('Deck', {deckId: deck.deckId, title: deck.title})
            this.setState({title: null})
            }
        )
    }

    render(){
        const disabled = this.state.title === null || this.state.title.length === 0
        return (
            <KeyboardAwareScrollView resetScrollToCoords={{ x: 0, y: 0 }}
                contentContainerStyle={styles.container}>
                <Text style={textStyles.title2}>Whats the title of your deck?</Text>
                    <TextInput editable={true} style={[styles.input, textStyles.body]}
                    placeholder='Type title here'
                    maxLength={25}
                    value={this.state.title}
                    onChangeText={(text) => {
                        this.setState({title: text})
                    }}
                    />
                <Button
                    onPress={this.submit}
                    text='Submit'
                    style={{backgroundColor: colors.pink}}
                    textStyle={textStyles.body}
                    disabled={!this.state.title} 
                />
              </KeyboardAwareScrollView>
            )
    }
}

如果 newDeck 组件的标题为空或 null，则 disabled 变量为真。当此变量为真时，按钮的不透明度应仅为 0.5。当该值变为 false 时，不透明度再次变为 1。如果我记录组件中的不透明度值，我可以看到它从 0.5 变为 1，但组件的外观没有改变。

Answer 1

不确定这是否是 TouchableOpacity 组件上的错误，但在单击该组件之前，不透明度不会在重新渲染时更新

要解决您的问题，只需将 touchable 的内容包装在 View 中并将 opacity 应用到视图而不是 touchable

export default function Button({text, onPress, style, disabled, textStyle}) {
    const opacity = disabled === true ? 0.5 : 1
    // console.log('opacity', opacity)
    return (
        <TouchableOpacity onPress={onPress} disabled={disabled} 
          style={[defaultStyles.button, style]}>
          <View style={{opacity}}>
            <Text style={[defaultStyles.text, textStyle]}>{text}</Text>
          </View>
        </TouchableOpacity>
    )

}

Answer 2

我认为正确的解决方案是使用 setOpacityTo 方法。

在你的 render:

render() {
  const opacityValue = this.props.disabled ? 0.5 : 1;
  return (
    <TouchableOpacity style={{ opacity: opacityValue }} ref={(btn) => { this.btn = btn; }} onPress={this.onPress}>
      <Text>{this.props.text}</Text>
    </TouchableOpacity>
  );
}

然后您可以在 componentDidUpdate 中使用 setOpacityTo 方法 disabled 道具更改：

  componentDidUpdate(prevProps) {
    const { disabled } = this.props;
    if (disabled !== prevProps.disabled) {
      const opacityValue = disabled ? 0.5 : 1;
      this.btn.setOpacityTo(opacityValue);
    }
  }

Answer 3

如果您使用的是 React Native 版本 0.63 以上版本，那么 Pressable 是更优雅的解决方案，它的不透明度更改按预期工作。

<Pressable
    style={{
       opacity: item.isSelected ? 0.5 : 1
    }}>
       //Your button content goes here
</Pressable>

Answer 4

对我来说，当我还更改 disabled 道具和不透明度时，它起作用了。

我想问题是 TouchableOpacity 中的不透明度是 Animated.Value 覆盖 style 道具中的值并且不会改变，当 style道具变化...

Answer 5

我有同样的问题，这是一种奇怪的行为，只需在 TouchableOpacity 组件中添加一个具有所需样式的 View 组件，如下所示：

     <TouchableOpacity >
      {/* this view is just because opacity doesn't work dynamically on touchable opacity */}
      <View style={{opacity : (loading)? 0.5 : 1 }}>

      <Text>Your text here</Text>
      </View>
    </TouchableOpacity>

当组件在本机反应中重新呈现时，动态不透明度不会改变

Dynamic Opacity not changing when component rerenders in react native

javascript

opacity

reactjs

react-native

touchableopacity