試圖使圖像在按鈕按下時出現-反應本機

Question

我只是試圖按一個按鈕並顯示一個圖像。 我收到“嘗試分配給只讀屬性”的錯誤，這是我的代碼。

export class calculateRoute extends Component{
  render() {
    return (
      <View>
        <Image
          style={{width: 50, height: 50}}
          source={require('./Alexa.png')}
        />
      </View>
    );
  }
}

然后這是我的按鈕代碼，應該可以在按下時簡單地返回圖像。 此代碼在不同的類中。

<Button
    onPress={calculateRoute}
    title="Calculate Route"
    color="#841584"
    accessibilityLabel="Button to calculate route"
/>

Answer 1

試試這個代替：

export class calculateRoute extends Component{
  constructor () { 
    super();
    this.state = {showImage: false};
  }

  showImageFunc = () => {
     this.setState({showImage: true});
  }

  render() {
    return (
      <div>
        {this.state.showImage &&
        <View>
          <Image
            style={{width: 50, height: 50}}
            source={require('./Alexa.png')} />
        </View>}
        <Button
          onPress={this.showImageFunc}
          title="Calculate Route"
          color="#841584"
          accessibilityLabel="Button to calculate route" />
      </div>
    );
  }
}

處於組件狀態的showImage會告訴渲染器何時顯示圖像。 希望能幫助到你。