给无效的道具`source`提供给Image的Image uri

如何解决给无效的道具`source`提供给Image的Image uri

我正在使用React Native开发Iphone App。我想在屏幕上显示一系列图像。下面是代码：Download.js

/my/path

通过API，我得到了以下数组：

import React,{useEffect,useState} from 'react';
import { View,StyleSheet,Text,FlatList,ActivityIndicator,Image} from 'react-native';
import { useSelector,usedispatch} from 'react-redux';
import * as downloadActions from '../../store/actions/download';

const DownloadPage = props =>{
const image = useSelector(state => state.download.availableImages);
const [isLoading,setIsLoading] = useState(false);
const dispatch = usedispatch(); 

useEffect(() => {
 const loadImage = async ()=>{
  setIsLoading(true);
   await dispatch(downloadActions.filedownload());
   setIsLoading(false);
   //setIsLoading(true);
 };
 loadImage();
  },[dispatch]);

 if(isLoading){
 return <View>
   <ActivityIndicator size='large'/>
 </View>
 }

 return(
  <View style={styles.MainContainer}>
  <FlatList
  data={ image }
  renderItem={({item}) => 
   <View style={{flex:1,flexDirection: 'row'}}>
   <Image source = {{ uri: item.GCP_Image}}  style={styles.imageView} />
   </View>
 
   }

 keyExtractor={(item,index) => index.toString()}
 
 />

 </View>

 )}

 const styles = StyleSheet.create({

  MainContainer :{
 
    justifyContent: 'center',flex:1,margin: 5,marginTop: (Platform.OS === 'ios') ? 20 : 0,backgroundColor: 'green'
  },imageView: {
 
    width: '50%',height: 100,margin: 7,borderRadius : 7
 
   },textView: {
 
    width:'50%',textAlignVertical:'center',padding:10,color: '#000'
 
   }
   
   });


   export default DownloadPage;

所有这些图片都是有效的网址。

如果我使用{item.GCP_Image}将数组传递给图像源，则仅显示第一张图像。当将此数组传递给Image uri时，出现以下错误：警告：道具类型失败：提供给Array [ Image { "GCP_Image": Array [ "https://storage.googleapis.com/...../1602863214485.jpg","https://storage.googleapis.com/...../0Ay3P4AVObQ8csHgAFk5.mp4","https://storage.googleapis.com/...../1LNQQmtjEm4apPp4VK6u.jpg" ]的道具source无效。

能帮我解决我的问题吗？预先感谢。

解决方法

图片source属性的类型为ImageURISource或ImageURISource的数组。所以尝试：

Array [
Image {
"GCP_Image": Array [
  {uri: "https://storage.googleapis.com/...../1602863214485.jpg"},{uri: "https://storage.googleapis.com/...../0Ay3P4AVObQ8csHgAFk5.mp4"},{uri: "https://storage.googleapis.com/...../1LNQQmtjEm4apPp4VK6u.jpg"}
 ]

这是ImageURISource的数组

由于从api返回的数据具有预定义的形状，因此可以将图像数组提供给FlatList，如下所示。因为GCP_Image具有实际的图像uris作为可接受的数组。

 <FlatList
  data={image[0].GCP_Image} ...
/>

然后，在您的renderItem函数中，您需要提供item作为源uri

renderItem = {({item}) => 
   <View style={{flex:1,flexDirection: 'row'}}>
   <Image source = {{ uri: item}}  style={styles.imageView} />
   </View>}