Question

我正在使用本机开发UI，在此<Image>与源一起使用，我想通过setNativeProps而不是通过状态来更改图像源。

我的代码是：

<Image source={require('imagePath')} ref="icon"/>

在某些事件上我想改变它的来源：

this.refs['icon'].setNativeProps({
    source: require('newImagePath')
  });

但没有任何反应，它没有改变。通过使用NativeProps，图像的样式会发生变化，但像源和类似的道具不会发生变化。

那么请给我一个解决方案，如何通过使用其refs或key（而不是使用this.setState）更改任何特定事件的图像源

Answer 1

最后，我找到了通过静态图像更改图像源的方法。我们首先需要将resolveAssetSource函数用于静态图像，然后将其放在src中。

import resolveAssetSource from 'resolveAssetSource';

...


var imgsrc = require('imagePath');

this.refs['icon'].setNativeProps({
   src: [resolveAssetSource(imgsrc)]
});

<强>更新

在IOS上，使用source而不是src。

Answer 2

感谢@DennisFrea给出了我想要的答案 - 只需将源添加为数组而不是对象。

更正语法

this._imageContainer.setNativeProps({
  source: [{ uri: newImageSource }]
})

语法错误

this._imageContainer.setNativeProps({
  source: { uri: newImageSource }
})

Answer 3

我认为这是不可能的，因为RN处理状态的方式和require（）捆绑文件的方式。

但是，我可以想到两件事要尝试：

ForceUpdate：尝试在本机道具之后调用this.refs [＆＃39; icon＆＃39;]。forceUpdate（）来强制重新渲染。
在图片中设置包装并更新该包装，这样您就不会修改原始图像源。

像这样：Programmatically add a component in React Native

如何通过在native native中使用setNativeProps来更改图像源

3 个答案: