加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

React native:图像未呈现

发布时间:2020-12-15 09:32:42 所属栏目:百科 来源:网络整理
导读:在本机反应中,我只是加载网络图像. 码: const { width,height } = Dimensions.get('window'); const prod= []; const prodName = ''; const url = ''; const results = []; class Product extends Component { renderWhenAPISuccess(){ results=this.props.
在本机反应中,我只是加载网络图像.

码:

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>

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读