React native: Images are not getting rendered

问题

In react native , I am simply loading an network image.

Code:

 const { width, height } = Dimensions.get('window');
 const prod= [];
    const prodName = '';
    const url = '';
    const results = [];
    class Product extends Component {
        renderWhenAPISuccess(){
          results=this.props.product;
          for(var i =1; i<results.length; i++){
            prodName = results[i].prodName;
            url = results[i].url;
            prod.push(
              <View key={i}>
               <Image
                  style={{ width: width/2, height: width/2}}
                  resizeMode={'contain'}
                  /*source={require('../img/bangalore1.jpg')}*/
                  source={{ uri: "https://example.in" + url }}
               ></Image>
               <Text>{prodName}</Text>
              </View>
           )
         }
       }

    render(){
      if(//network success){
        this.renderWhenAPISuccess();
      }
     return (
         {
            !isNetworkSuccess && 
             <View>
                <Text>Wait for api success</Text>
             </View>
         }
         {
          isNetworkSuccess &&
            <View>
              <ScrollView removeClippedSubviews={true}>
                  {prod}
              </ScrollView>
            </View>
         }
        );
     }
    }

When I am having multiple images in a screen, the images are not getting rendered.

When image source is like this :

source={require('../img/bangalore1.jpg')}

its rendering properly. How can I render the images properly? Is there any library to render network images ?

Please ignore the part of calling api and storing it. Everything is working fine except rendering of few images . Please note that randomly images are not rendering.

回答1:

Finally I have found a solution.

Use react-native-cached-image for fetching mutiple images.

<CachedImage
     style={{ width: width / 2.35, height: 180, }}
     source={{
     uri: "https://myproject.in" + productDetail.image_url
    }}
></CachedImage>

回答2:

I had the same problem and I've searched almost all the web for that. I tried FlatList and ListView and RecyclerListView Finally I found the solution my self. It was very simple. You don't even need react-native-cached-image or any third-party component. When you want to show list of images (like Instagram) all need to do is:

1- Instead of rendering the data inside the rowRenderer function just write another child component and send the data via props like this:

render() {
    return (
            <View style={{flex: 1}}>
                <RecyclerListView
                    ref="memories_ref"
                    forceNonDeterministicRendering={true}
                    layoutProvider={this._layoutProvider}
                    dataProvider={this.state.dataProvider}
                    rowRenderer={this.renderMemories.bind(this)}
                    renderAheadOffset={50}
                />
            </View>
        );

}

2- And in rowRenderer just load your child component:

renderMemories(type, item) {
    return (<Memory liked={liked} item={item}/>);
}

回答3:

What I see is without calling this.setState({...}) the render method gets never called, so you will never see nothing being rendered. If I were you I would do some changes:

1. Call the API in componentDidMount
2. Set your state before and after using this.setState so render is called
3. Render depending on the state, not in vars. This is one of the most important concepts behind ReactNative.

I can't set an environment right now, so I could not test the snippet, but it should look like this:

const { width, height } = Dimensions.get('window');

class Product extends Component {
    constructor(props){
        super(props);

        this.renderWhenAPISuccess = this.renderWhenAPISuccess.bind(this);
    }

    renderWhenAPISuccess(){
        let prod= [];
        let results = this.props.product;
        for(var i =1; i<results.length; i++){
            prod.push(
              <View key={i}>
                <Image
                  style={{ width: width/2, height: width/2}}
                  resizeMode={'contain'}
                  /*source={require('../img/bangalore1.jpg')}*/
                  source={{ uri: "https://example.in" + results[i].url }}
                />
                <Text>{results[i].prodName}</Text>
              </View>
            )
        }

        //You always need to return the component to be rendered
        //and in your case you will also need a ScrollView or a FlatList
        return (
            <ScrollView style={{flex: 1}} horizontal={true}>
                {prod}
            </ScrollView>
        );
    }

    componentDidMount(){
        //Call your API
        this.setState({isNetworkSuccess: false}, () => {
            fetch('URL')
              .then(products => this.setState({products, isNetworkSuccess: true}))
              .catch(ex => this.setState({error: ex}))
        });
    }

    render(){
        if(this.props.isNetworkSuccess){
            return this.renderWhenAPISuccess();
        }

        return (
             <View>
                <Text>Wait for api success</Text>
             </View>
        );
    }
}

Try fixing an image using source={require('...')} first in order to see the changes, and then move ahead with the URL.

Try this code and let me know, sadly, I cannot test it right now, so...

回答4:

largeHeap="true" worked for me in androidmanifest.xml

回答5:

Try using resizeMethod in your Image like so:

<Image
   resizeMethod="resize"`
   ...
 />

(Careful, don't mix it with resizeMode)

Then your images should get rendered again.

来源：https://stackoverflow.com/questions/45736887/react-native-images-are-not-getting-rendered