Блог

Главная - Вопросы по программированию - URI изображения, предоставляющий недопустимый prop `source`, предоставленный `Image`

URI изображения, предоставляющий недопустимый prop `source`, предоставленный `Image`

#image #react-native #uri

#изображение #react-native #uri

Вопрос:

Я разрабатываю приложение для Iphone с использованием React Native.Я хочу отобразить массив изображений на экране. Ниже приведен код: Download.js

 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;

С помощью API я получил следующий массив:

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

Все эти изображения являются допустимыми URL-адресами.

Если я передам массив в источник изображения с помощью {item .GCP_Image} отображается только первое изображение.Когда я передаю этот массив в uri изображения, я получаю следующую ошибку: Предупреждение: сбой типа реквизита: недопустимый реквизит source , предоставленный Image .

Не могли бы вы помочь мне, где я ошибаюсь. Заранее спасибо.

Ответ №1:

Свойство Image source принимает что-то типа ImageURISource или массив ImageURISource ‘s. Так что попробуйте:

 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

Комментарии:

1. Я мог бы отправить следующие данные API, как вы сказали выше: Array [ Image { «GCP_Image»: Array [ Object { «uri»: » storage.googleapis.com/…../IphoneImg-1602863214485.jpg «, },Объект { «uri»: » storage.googleapis.com/…../IphoneImg-1602863214486.jpg «, }]}]. После запуска этого я получаю сообщение об ошибке: значение JSON ‘{uri = » storage.googleapis.com/…../IphoneImg-1602863214485.jpg «}’ типа NSMutableDictionary не может быть преобразован в допустимый URL. Есть какие-либо мысли об этом. Я все еще пытаюсь…

2. с изображением как GCP_Image[0]}}/>

3. попробуйте <Image source={itemData.item.GCP_Image[0]}/>

Ответ №2:

Поскольку ваши данные, возвращаемые из вашего api, имеют предопределенную форму, вы можете предоставить массив изображений в свой FlatList, как показано ниже. Потому что GCP_Image имеет фактические URI изображения в качестве приемлемого массива.

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