在React native中运行时加载图像

Question

There are many such situation in my app where I need to set image at run time. for example

1. I get the Image URL on button click

2. I need to display image (loader) on button click

3. I need to change image depending upon the user's action

How do I do this? So far I am not able to figure out how to access my nodes (let it be Text, Image, Text Input etc)

For showing loader image i found many packages, but i don't want to use a package just for showing a loader image.

Any code concept or tutorial will be Appreciated.

Update: I am setting image in constructor (this is static image) class LoginScreen extends Component {

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

In render method i'm using image tag like this

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

It is throwing null error on the image tag error: "null is not an object(evlauating this.state.imageUri).

Where Am i mistaking? Also i need to set this image on button click. Before that it should be hidden. How to implement these scenarios?

Answer 1

All of these cases can be resolved by using a component's state to store the image URLs. For instance:

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

In your render method, followed by:

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

Would allow you to have a dynamic image based on both user events, and runtime variables.

For showing a loading state while the image downloads I'd recommend the react-native-image-progress component which handles the display of a loading indicator while the image downloads.

Using a number of simple components like this is completely normal when developing React Native apps, so don't be overly-concerned about utilising 3rd-party code like that.