구성 요소가 반응 네이티브에서 rerenders 때 동적 불투명도가 변경되지 않습니다.

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 구성 요소의 제목이 비어있는 경우 또는 장애인 변수는 사실이다 없는. 이 변수가 true이면 버튼의 불투명도는 0.5 여야합니다. 값이 false가되면 불투명도가 다시 1로 변경됩니다. 구성 요소에 불투명도의 값을 기록하면 0.5에서 1로 표시되지만 구성 요소의 모양은 변경되지 않습니다. 구성 요소가 단지에 만질의 내용을 포장 문제를 해결하기 위해

를 클릭 할 때까지가 TouchableOpacity 구성 요소에 버그가, 그러나 불투명도가에 업데이트하지 않을 경우

Answer 1

확실하지 다시 렌더링 보기 및 동적 렌더링을 제어 할 수있는 코드에서 만질 수

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

}