[英]Trying to make an image appear upon button press - react native
I am simply trying to press a button and have an image appear. 我只是试图按一个按钮并显示一个图像。 I am receiving an error that is "Attempted to assign to readonly property" This is my code. 我收到“尝试分配给只读属性”的错误,这是我的代码。
export class calculateRoute extends Component{
render() {
return (
<View>
<Image
style={{width: 50, height: 50}}
source={require('./Alexa.png')}
/>
</View>
);
}
}
and then this is my button code that should simply return an image on press. 然后这是我的按钮代码,应该可以在按下时简单地返回图像。 This code is in a different class. 此代码在不同的类中。
<Button
onPress={calculateRoute}
title="Calculate Route"
color="#841584"
accessibilityLabel="Button to calculate route"
/>
try this instead: 试试这个代替:
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>
);
}
}
the showImage
in the component state will tell the render when to display the image. 处于组件状态的showImage
会告诉渲染器何时显示图像。 hope it helps. 希望能帮助到你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.