Javascript 在react native中重新渲染组件时动态不透明度不更改

我开始学习React Native，并为我的项目创建了一个简单的按钮组件，以便在项目中重用。我根据变量“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
    ])
}

从“React”导入React
从“react native”导入{View，Text，TouchableOpacity，StyleSheet}
从“道具类型”导入道具类型
//待办事项：arrumar o problema Coma opacidade
导出默认功能按钮（{text，onPress，style，disabled，textStyle}）{
让不透明度=禁用===真？0.5:1
//console.log（'opacity'，opacity）
返回(
{text}
)
}
const defaultStyles=StyleSheet.create({
正文：{
颜色：“白色”
},
按钮：{
背景颜色：“黑色”，
差额：15，
填充：15，
边界半径：10
},
})
Button.propTypes={
text:PropTypes.string，
onPress:PropTypes.func，
样式：PropTypes.oneOfType([
PropTypes.string，
PropTypes.array，
PropTypes.object
]),
禁用：PropTypes.bool，
text样式：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扩展组件{
陈述={
标题：空
}
提交=（）=>{
const{add，goBack}=this.props
让deck={…this.state}
如果（！deck['deckId']）{
deck['deckId']=日期。现在（）
甲板['logs']=[]
}
！deck['cardsId']&（deck['cardsId']=[]）
添加（组）。然后（（）=>{
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
返回(
你的牌组名称是什么？
{
this.setState（{title:text}）
}}
/>
)
}
}

---

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

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

要解决您的问题，只需将可触摸的内容包装在视图中，并将不透明度应用于视图，而不是可触摸的内容

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>
    )

}

导出默认功能按钮（{text，onPress，style，disabled，textStyle}）{
常量不透明度=禁用===true？0.5:1
//console.log（'opacity'，opacity）
返回(
{text}
)
}

在我看来，正确的解决方法是使用方法

在

渲染中

：

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>
  );
}

---

如果您使用的是React Native version 0.63以后的版本，则Pressable是一种更优雅的解决方案，其不透明度更改效果与预期一致

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

//你的按钮内容在这里

对我来说，当我将

禁用的
道具与不透明度一起更改时，它起到了作用

我想问题在于
TouchableOpacity
中的不透明度是一个
动画.Value
，它覆盖
样式
道具中的值，并且在
样式
道具更改时不会更改…
代码中的任何内容都无法控制动态渲染。你想做什么？只要一个按钮，如果禁用的变量为真，不透明度就会改变。让我们看看你是如何使用它的button@FacundoLaRocca我把更多的信息！你能把不透明度放在TouchableOpacity文本中，看看它是否会改变吗？我很乐意，如果对你有效，请确保将答案标记为正确。你救了我的命。Thanksupdate opacity with click on component已与您的解决方案一起使用，但仍延迟更新了不透明度。有没有办法解决这个问题？不要只对可触摸的视图应用不透明度
<Pressable
    style={{
       opacity: item.isSelected ? 0.5 : 1
    }}>
       //Your button content goes here
</Pressable>