如何在 react native 中使用 setNativeProps 更改图像的源

Question

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

我的代码是：

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

在某些事件上，我想更改其来源：

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

但是什么都没有发生，它没有改变。通过使用NativeProps，图像的样式发生了变化，但像源这样的道具不会改变。

所以请给我一个解决方案，我如何使用其引用或键(而不是使用 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

跨平台版本：

const nativeProp = Platform.OS === 'ios' ? 'source' : 'src';
imageRef.current?.setNativeProps({
  [nativeProp]: [image], // array
});

另外，请考虑使用图像道具fadeDuration={0}在 Android 上禁用淡入淡出。

Answer 4

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

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

1. ForceUpdate：尝试在原生道具之后调用this.refs['icon'].forceUpdate((来强制重新渲染。
2. 在映像中设置包装器并更新该包装器，这样就不会修改原始映像源。

像这样：在 React Native 中以编程方式添加一个组件