当组件重新生成时，动态不透明度不会发生变化 [英] Dynamic Opacity not changing when component rerenders in react native

问题描述

我开始学习React Native，对于我的项目，我创建了一个简单的Button组件，可以在我的项目中重用。我根据变量'disabled'动态设置不透明度值，但是，按钮的外观不会随着opacity变量的值而变化。我四处搜索，但我没有找到解释..

任何帮助都将不胜感激。

I'm starting to learn React Native, and for my project I created a simple Button component to reuse in my project. I set the opacity value dynamically according to the variable 'disabled', however, the look of the button is not changing with the value of the opacity variable. I searched around and I have not found an explanation..
Any help will be appreciated.

这是我的源代码：

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

编辑：
以下是调用按钮的代码

Here is the code the calls the button

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。当此变量为true时，按钮的不透明度应仅为0.5。当值变为false时，不透明度再次变为1。如果我在组件中记录不透明度的值，我可以看到它从0.5变为1，但组件的外观不会改变。

The disabled variable is true if the title of the newDeck component is empty or null. When this variable is true, the opacity of the button should be only 0.5. When the value goes to false, then the opacity changes to 1 again. If I log the value of the opacity in the component, I can see it going from 0.5 to 1, but the look of the component doesn't change.

推荐答案

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

not sure if it's a bug on the TouchableOpacity component, but the opacity won't update on a re-render until the component is clicked

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

to fix your problem just wrap the content of the touchable in a View and apply the opacity to the view instead of the 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>
    )

}

这篇关于当组件重新生成时，动态不透明度不会发生变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！