在React native中运行时加载图像

Question

我的应用程序中有很多这样的情况我需要在运行时设置图像。例如

1。我点击按钮

获取图片网址

2。我需要在按钮上单击

显示图像（加载器）

第3。我需要根据用户的操作

更改图片

我该怎么做？到目前为止，我无法弄清楚如何访问我的节点（让它成为文本，图像，文本输入等）

为了显示加载程序图像，我发现了许多软件包，但我不想仅仅为了显示加载程序映像而使用软件包。

任何代码概念或教程都将得到赞赏。

更新： 我在构造函数中设置图像（这是静态图像） class LoginScreen扩展了Component {

constructor(props){
      super(props);
      this.setState({imageUri:'../images/loader.gif'});
}

在render方法中，我使用像这样的图片标记

<Image source={{uri: this.state.imageUri}} style={styles.image}  />

它会在图像标记上抛出null错误 错误：＆＃34; null不是对象（evlauating this.state.imageUri）。

我错在哪里？此外，我需要在按钮单击设置此图像。在此之前它应该被隐藏。如何实现这些场景？

Answer 1

通过使用组件的状态来存储图像URL，可以解决所有这些情况。例如：

<Image source={{uri: this.state.imageUri}} />

在你的渲染方法中，接着是：

this.setState({
  imageUri: // Some uri...
})

允许您根据用户事件和运行时变量获得动态图像。

为了在图像下载时显示加载状态，我建议使用react-native-image-progress组件，在图像下载时处理加载指示器的显示。

在开发React Native应用程序时，使用这样的一些简单组件是完全正常的，所以不要过分关注使用第三方代码。