Question

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

代码：

 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并存储它的部分。除了渲染少量图像外，一切正常。请注意，随机图像不会呈现。

Answer 1

最后我找到了解决方案。

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

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

Answer 2

我遇到了同样的问题，而且我已经搜索了几乎所有的网页。我尝试了FlatList和ListView以及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}/>);
}

Answer 3

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

在componentDidMount
使用this.setState之前和之后设置您的状态，因此称为渲染
根据状态而不是变量而渲染。这是ReactNative背后最重要的概念之一。

我现在无法设置环境，因此我无法测试代码段，但它应该如下所示：

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('...')}修复图片以查看更改，然后继续使用网址。

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

Answer 4

类优惠扩展了组件{

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

}

Answer 5

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

Answer 6

尝试在Image中使用resizeMethod，如下所示：

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

（注意，请勿将其与resizeMode混合使用）

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

React native：图像未呈现

6 个答案: