如何使用更新图像源以响应新闻事件

Question

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

source: require('someSource.png')

并实现

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

到onPress功能。不知何故，图像大小也相应地发生了变化，因为我在图像样式中添加了resizeMode:'contain'。但是第二个图像文件没有加载到视图中。图像查看的部分：

<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（向上箭头）和另一个（向下箭头）之间切换状态。