尝试使图像显示在按钮上 - 按下 - 反应本机

Question

我只是尝试按下按钮并显示图像。我正在收到一个错误，该错误是"试图分配给ReadOnly属性"这是我的代码。

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将告诉渲染时间何时显示图像。希望它有帮助。