コンポーネントが再ネイティブで反応したときに動的な不透明度が変化しない

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

はEDIT： newDeckコンポーネントのタイトルが空である場合、またはここでは、コードの呼び出しボタン

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

が無効になっ変数が真であるさヌル。この変数がtrueの場合、ボタンの不透明度は0.5に過ぎません。値がfalseになると、不透明度は再び1に変わります。コンポーネントの不透明度の値を記録すると、0.5から1になりますが、コンポーネントの外観は変わりません。

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

}