React native：图像未呈现

码：

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>
         }
        );
     }
    }

当我在屏幕上有多个图像时,图像不会被渲染.

当图像源是这样的：

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

它的渲染得当.如何正确渲染图像？是否有任何库来呈现网络图像？

请忽略调用api并存储它的部分.除了渲染少量图像外,一切正常.请注意,随机图像不会呈现.

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>