Question

我有一个touchableOpacity组件包含一些.png图片文件，我想更改其中一个图片源并将change事件绑定到onPress事件。我当前将源初始化为getInitialState（）中的prop，如

source: require('someSource.png')

并实施

this.setState({source: require('someOtherSource.png')});

到onPress函数。不知何故，图像大小也相应改变，因为我添加了resizeMode：'contains'到图像样式。但是第二个图像文件没有加载到视图上。图像视图的部分：

<TouchableOpacity style={styles.newUserRegister}
                    onPress={this.doRegister}>
                <Image style={styles.accNewUser} source={this.state.source}/>
</TouchableOpacity>

并在doRegister（）函数中：

this.setState({source: require('someOtherSource.png')});

我有三种状态的图像源，所以我认为在doRegister中调用setState函数可能是一个更好的解决方案。

如果是样式问题，这也是accNewUser的样式

accNewUser:{
    marginTop:5,
    resizeMode: 'contain',
    alignItems: 'center',
},

Answer 1

我为你的案例做了这个例子：https://rnplay.org/apps/jePI5Q

不幸的是，RNPlay不允许添加资产，所以我不得不使用uri引用的外部图像。只需将这些引用替换为require(<asset>)，您就可以了。

该示例在defaultSource（向上箭头）和另一个（向下箭头）之间切换状态。

如何通过响应新闻事件来更新图像源

1 个答案: