ios - 循环时图像不会更新
问题描述
我对整个 React Native 和 JS 的东西都很陌生,所以我可能在这里犯了一个愚蠢的错误。我有以下从这里得到的代码:https ://reactnativecode.com/change-image-source-dynamically/
代码进行了一些调整,因为我希望它循环。
问题如下:第一次就变了。然后再次单击它会更改 URL(因为我在 Text 组件中有它)但图像不会再次显示。然后当再次按下(第 3 次)时,文本(变量名)将不再改变,图像仍然不会显示。
import React, { Component } from 'react';
import { StyleSheet, View, Text, Image, Button, Platform, TouchableHighlight } from 'react-native';
export default class App extends Component {
constructor() {
super();
this.state = {
imageURL: 'https://reactnativecode.com/wp-content/uploads/2017/10/Guitar.jpg'
}
}
Load_New_Image = () => {
if (this.state.imageURL == 'https://reactnativecode.com/wp-content/uploads/2017/10/Guitar.jpg'){
this.setState({
imageURL: 'https://reactnativecode.com/wp-content/uploads/2018/02/motorcycle.jpg'
})
}else{
this.setState({
imageURL: 'https://reactnativecode.com/wp-content/uploads/2018/02/Guitar.jpg'
})
}
}
render() {
console.log('source: ', this.state.imageURL)
return (
<View style={styles.MainContainer}>
<TouchableHighlight onPress={this.Load_New_Image}>
<Image
key={this.state.imageURL}
source={{ uri: this.state.imageURL }}
style={styles.imageStyle} />
</TouchableHighlight>
<Text>{this.state.imageURL}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
justifyContent: 'center',
alignItems: 'center',
flex: 1,
paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
margin: 10
},
imageStyle: {
width: 200,
height: 300,
resizeMode: 'center'
}
});
解决方案
推荐阅读
- java - 适配器中的 viewHolder.getAdapterPosition() 返回 -1 位置并导致 IndexOutOfBoundException
- python - Visual Studio Code 中的 Pylint“未解决的导入”错误
- python - python - 如何从元组中获得持久哈希?
- c# - HasThis 和 ExplicitThis 调用约定
- android - 如何修复“必需的 MutableLiveData
但“SwitchMap”被推断为 LiveData " 使用 Transformations.switchMap 时? - swift - Swift 4:“(SomeUIViewController)->()->(SomeUIViewController)”类型的值没有成员“someMemberItem”
- python - 从预先计算的一组绘图中创建动画:ArtistAnimation
- react-native - 每次系统重启时都需要设置 JAVA_HOME 变量吗?
- database - 在 Laravel 5.7 中以链式关系播种
- macos - 我的 Mac 上的 Spyder 最近停止工作,并在我启动它后立即向终端发送错误消息