我开始学习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
    ])
}

编辑:

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,但组件的外观没有改变.

推荐答案

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

要解决您的问题,只需将可touch 的内容包装在View中,并将opacity应用于视图,而不是可touch 的内容

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

}

React-native相关问答推荐

expo 使用错误的版本代码创建建筑

为什么当键盘出现在react native 时我的按钮会上升?按钮视图位置是绝对的?

React Navigation v5 中的初始路由参数?

PanResponder 在第二次拖动时将 Animated.View 捕捉回原始位置

TextInput 防止 ScrollView 滚动

如何在StackNavigator 中实现自定义标题图标?

React-native 解码 base64 编码字符串

错误:安装 react-native-elements 后无法识别字体系列 Material Design 图标?

在 React Native 中仅显示第一行文本

你如何从 React Native 的 EventEmitter 实例中移除一个监听器?

React-Native:FlatList onRefresh not called on pull up.

如何使 React Native Animated.View 可点击?

如何在 React Native 中获取电话号码?

如何在react-native中设置 FlatList 的刷新指示器?

将 react-native 元素Bundle 为 iOS 框架或 (.aar) Android 库

react-native Bottom Up drawer

React-Native 最低 Android API 级别

如何为 TouchableOpacity 组件创建禁用样式?

如何升级 react-native gradle 版本

如何修复 npm 审计修复问题?