React native 显示加载程序，直到live link映像未完全加载为止。0.58

我从一个api接收到一个JSON数组，其中图像有一个实时链接。所以，在成功渲染数据之后，问题是我想显示gif，直到图像完全加载

阵列是：-

[{
    "category": "Loose Flower",
    "id": "7",
    "product_name": "Drb,Tls,Blpt,Nlknt",
    "unit_price": "0",
    "img_path": "http://prabhujionline.com/bo/upload/product_img/1513948635octa_pooja_basket_w_handle6_580x@2x.jpg",
    "count": 0,
    "is_loaded": true
  },
  {
    "category": "Loose Flower",
    "id": "1",
    "product_name": "Genda",
    "unit_price": "0.5",
    "img_path": "http://prabhujionline.com/bo/upload/product_img/1513947159genda.png",
    "count": 0,
    "is_loaded": true
  }]

<Image
 style={{ height: 212 / 3, width: 300 / 3, borderRadius: 5 }}
 source={(this.state.singlepack.is_loaded) ? { uri: 
 this.state.singlepack.img_path } : 
 require('../../../../assets/flower-loader.gif')}
  onLoadStart={(e) => { 
     this.changeImageLoadStatusOnStart(this.props.singleData.id) }}
  onLoadEnd={(e) => 
  this.changeImageLoadStatusOnEnd(this.props.singleData.id) }
 />


changeImageLoadStatusOnStart = (id)=>{
        this.setState({
            singlepack: {
                ...this.state.singlepack,
                is_loaded : false
            }
        })
    }

    changeImageLoadStatusOnEnd = (id) => {
        this.setState({
            singlepack: {
                ...this.state.singlepack,
                is_loaded: true
            }
        })
    }

[{
“类别”：“散花”，
“id”：“7”，
“产品名称”：“Drb、Tls、Blpt、Nlknt”，
“单价”：“0”，
“img_路径”：http://prabhujionline.com/bo/upload/product_img/1513948635octa_pooja_basket_w_handle6_580x@2x.jpg“，
“计数”：0，
“是否加载”：true
},
{
“类别”：“散花”，
“id”：“1”，
“产品名称”：“Genda”，
“单价”：“0.5”，
“img_路径”：http://prabhujionline.com/bo/upload/product_img/1513947159genda.png",
“计数”：0，
“是否加载”：true
}]
{ 
this.changeMageLoadStatusOnStart（this.props.singleData.id）}
onLoadEnd={（e）=>
this.changeMageLoadStatusOnend（this.props.singleData.id）}
/>
changeImageLoadStatusOnStart=（id）=>{
这是我的国家({
单包：{
…此.state.singlepack，
加载了吗：false
}
})
}
changeImageLoadStatusOnEnd=（id）=>{
这是我的国家({
单包：{
…此.state.singlepack，
加载了吗：真的
}
})
}

我已经尝试了onLoadStart和onLoadEnd，但我无法确定逻辑，可以为我提供帮助吗？

尝试以下方法：

class YourComponent extends React.Component {
  render() {
    return data.map(({ img_path }) => (
      <Image
        style={{ height: 212 / 3, width: 300 / 3, borderRadius: 5 }}
        source={{ uri: img_path }}
        loadingIndicatorSource={{
          uri: require('../../../../assets/flower-loader.gif'),
        }}
      />
    ));
  }
}

}

class YourComponent扩展了React.Component{
render（）{
返回data.map（{img_path}）=>(
));
}
}
}

或此

class YourComponent extends React.Component {
  state = {
    imgsLoaded: data.map(() => false),
  };

  componentDidMount() {
    for (let i = 0; i < data.length; i++) {
      Image.prefetch(data[i].img_path, () => {
        const { imgsLoaded } = this.state;
        const imgsLoadedUpdated = imgsLoaded.slice();
        imgsLoadedUpdated[i] = true;
        this.setState({ imgsLoaded: imgsLoadedUpdated });
      });
    }
  }

  render() {
    const { imgsLoaded } = this.state;

    return data.map(({ img_path }, index) => (
      <Image
        source={{
          uri: imgsLoaded[index]
            ? img_path
            : require('../../../../assets/flower-loader.gif'),
        }}
      />
    ));
  }
}

class YourComponent扩展了React.Component{
状态={
imgsLoaded:data.map（（）=>false），
};
componentDidMount（）{
for（设i=0；i{
const{imgsLoaded}=this.state；
常量imgsLoadedUpdated=imgsLoaded.slice（）；
imgsLoadedUpdated[i]=真；
this.setState（{imgsLoaded:imgsLoadedUpdated}）；
});
}
}
render（）{
const{imgsLoaded}=this.state；
返回data.map（{img_path}，index）=>(
));
}
}

试试这个：

class YourComponent extends React.Component {
  render() {
    return data.map(({ img_path }) => (
      <Image
        style={{ height: 212 / 3, width: 300 / 3, borderRadius: 5 }}
        source={{ uri: img_path }}
        loadingIndicatorSource={{
          uri: require('../../../../assets/flower-loader.gif'),
        }}
      />
    ));
  }
}

}

class YourComponent扩展了React.Component{
render（）{
返回data.map（{img_path}）=>(
));
}
}
}

或此

class YourComponent extends React.Component {
  state = {
    imgsLoaded: data.map(() => false),
  };

  componentDidMount() {
    for (let i = 0; i < data.length; i++) {
      Image.prefetch(data[i].img_path, () => {
        const { imgsLoaded } = this.state;
        const imgsLoadedUpdated = imgsLoaded.slice();
        imgsLoadedUpdated[i] = true;
        this.setState({ imgsLoaded: imgsLoadedUpdated });
      });
    }
  }

  render() {
    const { imgsLoaded } = this.state;

    return data.map(({ img_path }, index) => (
      <Image
        source={{
          uri: imgsLoaded[index]
            ? img_path
            : require('../../../../assets/flower-loader.gif'),
        }}
      />
    ));
  }
}

class YourComponent扩展了React.Component{
状态={
imgsLoaded:data.map（（）=>false），
};
componentDidMount（）{
for（设i=0；i{
const{imgsLoaded}=this.state；
常量imgsLoadedUpdated=imgsLoaded.slice（）；
imgsLoadedUpdated[i]=真；
this.setState（{imgsLoaded:imgsLoadedUpdated}）；
});
}
}
render（）{
const{imgsLoaded}=this.state；
返回data.map（{img_path}，index）=>(
));
}
}

defaultSorce和loadingIndicatorSource工作不正常。我找到了解决办法

const loaderImage = require('./../assets/img/spinner.png');
var {width} = Dimensions.get('window');

this.state = {
  imageloading: true,
};

_renderItemFood(item) {
    return (
      <TouchableOpacity
        style={styles.divFood}>
        <Image
          style={styles.imageFood}
          resizeMode="contain"
          source={{uri: 'https://api.example.com/images/' + item.image}}
          onLoadEnd={e => this.setState({imageloading: false})}
        />
        {this.state.imageloading && (
          <Image
            style={styles.imageFood}
            resizeMode="contain"
            source={loaderImage}
          />
        )}
        <Text>Some Product name</Text>
      </TouchableOpacity>
    );
  }

  const styles = StyleSheet.create({
    imageFood: {
      width: width / 2.5 - 20 - 10,
      height: width / 2.5 - 20 - 30,
      backgroundColor: 'transparent',
      position: 'absolute',
      top: -45,
    },
    divFood: {
      width: width / 2 - 20,
      padding: 10,
      borderRadius: 10,
      marginTop: 55,
      marginBottom: 5,
      marginLeft: 10,
      alignItems: 'center',
      elevation: 8,
      shadowOpacity: 0.3,
      shadowRadius: 50,
      backgroundColor: 'white',
    },
  });

const loaderImage=require（'./../assets/img/spinner.png'）；
var{width}=Dimensions.get（'window'）；
此.state={
图像加载：对，
};
_renderItemFood（项目）{
返回(
this.setState（{imageloading:false}）
/>
{this.state.imageloading&&(
)}
一些产品名称
);
}
const styles=StyleSheet.create({
图像食品：{
宽度：宽度/2.5-20-10，
高度：宽度/2.5-20-30，
背景色：“透明”，
位置：'绝对'，
前-45，
},
食物：{
宽度：宽度/2-20，
填充：10，
边界半径：10，
玛金托普：55，
marginBottom:5，
边缘左：10，
对齐项目：“居中”，
立面图：8，
阴影不透明度：0.3，
阴影半径：50，
背景颜色：“白色”，
},
});

defaultSorce和loadingIndicatorSource工作不正常。我找到了解决办法

const loaderImage = require('./../assets/img/spinner.png');
var {width} = Dimensions.get('window');

this.state = {
  imageloading: true,
};

_renderItemFood(item) {
    return (
      <TouchableOpacity
        style={styles.divFood}>
        <Image
          style={styles.imageFood}
          resizeMode="contain"
          source={{uri: 'https://api.example.com/images/' + item.image}}
          onLoadEnd={e => this.setState({imageloading: false})}
        />
        {this.state.imageloading && (
          <Image
            style={styles.imageFood}
            resizeMode="contain"
            source={loaderImage}
          />
        )}
        <Text>Some Product name</Text>
      </TouchableOpacity>
    );
  }

  const styles = StyleSheet.create({
    imageFood: {
      width: width / 2.5 - 20 - 10,
      height: width / 2.5 - 20 - 30,
      backgroundColor: 'transparent',
      position: 'absolute',
      top: -45,
    },
    divFood: {
      width: width / 2 - 20,
      padding: 10,
      borderRadius: 10,
      marginTop: 55,
      marginBottom: 5,
      marginLeft: 10,
      alignItems: 'center',
      elevation: 8,
      shadowOpacity: 0.3,
      shadowRadius: 50,
      backgroundColor: 'white',
    },
  });

const loaderImage=require（'./../assets/img/spinner.png'）；
var{width}=Dimensions.get（'window'）；
此.state={
图像加载：对，
};
_renderItemFood（项目）{
返回(
this.setState（{imageloading:false}）
/>
{this.state.imageloading&&(
)}
一些产品名称
);
}
const styles=StyleSheet.create({
图像食品：{
宽度：宽度/2.5-20-10，
高度：宽度/2.5-20-30，
背景色：“透明”，
位置：'绝对'，
前-45，
},
食物：{
宽度：宽度/2-20，
填充：10，
边界半径：10，
玛金托普：55，
marginBottom:5，
边缘左：10，
对齐项目：“居中”，
立面图：8，
阴影不透明度：0.3，
阴影半径：50，
背景颜色：“白色”，
},
});