我开始学习 React Native,并为我的项目创建了一个简单的 Button 组件以在我的项目中重用。我根据变量“禁用”动态设置不透明度值,但是,按钮的外观不会随着不透明度变量的值而改变。我四处搜寻,但没有找到解释。
任何帮助将不胜感激。
这是我的源代码:
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 变量为 true。当这个变量为真时,按钮的不透明度应该只有 0.5。当该值变为 false 时,不透明度再次变为 1。如果我记录组件中的不透明度值,我可以看到它从 0.5 变为 1,但组件的外观没有改变。