React native:图像未呈现

时间:2017-08-17 13:46:21

标签: image reactjs react-native react-redux

在本机反应中,我只是加载网络图像。

代码:

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

当我在屏幕上显示多个图像时,图像不会被渲染。

当图像源是这样的时候:

  

源= {要求( '../ IMG / bangalore1.jpg')}

正确渲染。如何正确渲染图像?是否有任何库来呈现网络图像?

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

6 个答案:

答案 0 :(得分:4)

最后我找到了解决方案。

  

使用react-native-cached-image获取多个图像。

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

答案 1 :(得分:2)

我遇到了同样的问题,而且我已经搜索了几乎所有的网页。 我尝试了FlatListListView以及RecyclerListView 最后,我找到了我自己的解决方案。它非常 简单 您甚至不需要 react-native-cached-image 或任何第三方组件。 当你想要显示图像列表(如Instagram)时,所有需要做的就是:

1-而不是在 rowRenderer 函数中呈现数据,只需编写另一个子组件并通过props发送数据,如下所示:

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-在rowRenderer中加载你的子组件:

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

答案 2 :(得分:1)

我看到的是没有调用this.setState({...})从不调用渲染方法,所以你永远不会看到任何渲染。 如果我是你,我会做一些改变:

  1. componentDidMount
  2. 中调用API
  3. 使用this.setState之前和之后设置您的状态,因此称为渲染
  4. 根据状态而不是变量而渲染。这是ReactNative背后最重要的概念之一。
  5. 我现在无法设置环境,因此我无法测试代码段,但它应该如下所示:

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

    首先尝试使用source={require('...')}修复图片以查看更改,然后继续使用网址。

    尝试使用此代码让我知道,遗憾的是,我现在无法测试,所以...

答案 3 :(得分:1)

类优惠扩展了组件{

constructor(props) {  
  super(props); 
  this.state = {
    entries: [
        {
            title: 'Beautiful',
            thumbnail: 'https://homepages.cae.wisc.edu/~ece533/images/airplane.png'
        },
        {
            title: 'Earlier this',
            thumbnail: 'https://homepages.cae.wisc.edu/~ece533/images/baboon.png'
        },
        {
            title: 'White Pocket',
            thumbnail: 'https://homepages.cae.wisc.edu/~ece533/images/boat.png'
        },
      ],
  }  

}

_renderItem = ({item, index}, parallaxProps) => {
    return (
        <View style={styles.item}>
            <ParallaxImage
                source={{ uri: item.thumbnail }}
                containerStyle={styles.imageContainer}
                style={styles.image}
                parallaxFactor={0.4}
                {...parallaxProps}
            />
            <Text style={styles.title}>{ item.title }</Text>
        </View>
    );
}
render() {
    return (
        <Carousel
          ref={(c) => { this._carousel = c; }}
          data={this.state.entries}
          renderItem={this._renderItem}
          sliderWidth={screenWidth}
          itemWidth={screenWidth - 60}
          hasParallaxImages={true}
          useScrollView={true}
        />
    );
  }

}

答案 4 :(得分:0)

largeHeap =“ true”在androidmanifest.xml中为我工作了

答案 5 :(得分:0)

尝试在Image中使用resizeMethod,如下所示:

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

(注意,请勿将其与resizeMode混合使用)

然后您的图像应重新渲染。