Блог

Главная - Вопросы по программированию - Реагируйте на собственное изображение «Предупреждение: Неудачный тип реквизита: Недопустимый источник реквизита, указанный в «Изображении».»

Реагируйте на собственное изображение «Предупреждение: Неудачный тип реквизита: Недопустимый источник реквизита, указанный в «Изображении».»

#react-native #react-native-image

Вопрос:

Итак, это мой код, я уже ответил на вопрос.

 export const BigCard = ({Title, Image, Description}) => {
        console.log(Image)
            return(
                <StyledBigCard>
                    <StyledImage source={{
                        uri: Image,
                    }}/>
                    <StyledStroke>
                        <StyledStrokeText>
                            <StyledPBigCard>{Description}</StyledPBigCard>
                        </StyledStrokeText>
                        <FontAwesomeIcon style={style.icon} size={ 22 } icon={faChevronRight} />
                    </StyledStroke>
                </StyledBigCard>
        )
};

это если бы я импортировал изображения и т. Д. он установлен в PBS1Detail, это объект, поэтому, когда я перехожу в PBS1Detail.Изображение я получаю изображение

   const db = firebase.firestore();
  
  const [PBS1Detail, setPBS1Detail] = useState([]);
  const [partnerLevel, setPartnerLevel] = useState('');

  useEffect(()=> {
      {/* DATABASE */}
  db.collection('Track').get().then((snapshot) => {
      let results = []
    snapshot.docs.forEach(doc => {
      results.push(renderTracks(doc))
      }
    )
    setPBS1Detail(results)
    });

затем я нажимаю на него до самого экрана, когда импортирую изображение

все мои импортные данные верны, и console.log() дает мне правильный URL-адрес изображения. теперь, когда я перезагружаю приложение, оно выдает ошибку «Предупреждение: Неудачный тип реквизита: Неверный реквизит source , поставляемый Image «. затем, когда я обновляю компонент изображения до

 <StyledImage source={{uri: 'https://s3.eu-central-1.wasabisys.com/image-parttime-bijbelschool-jaar-1/Track1Module1Thumbnail.jpg'}}

и затем сохраните изменения, которые он будет работать
, когда я обновлю его до

 <StyledImage source={{uri: Image}} />

и чем сохранять изменения, это тоже работает

поэтому, когда я запускаю его в первый раз, он выдает мне эту ошибку, чем когда я меняю его на URL-адрес, а затем снова меняю его на изображение, которое работает. но когда я перезагружаю приложение, оно снова выдает мне эту ошибку.

как я могу это исправить?

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

1. можете ли вы поделиться фрагментом кода из родительского компонента, в который передается реквизит изображения?

2. Используете ли вы машинопись в этом проекте?

3. нет, я не использую машинопись, я использую стилизованные компоненты

4. @imKrishh Я обновил вопрос, console.log(изображение) дает мне возможный результат

Ответ №1:

Это PBS1Detail пустой массив, пока вы на самом деле не получите данные изображения из Firestore.

Поэтому при первом рендеринге я предполагаю, что вы пытаетесь передать undefined или некоторые недопустимые значения для исходной опоры.

Как насчет того, чтобы вы поставили условие для части рендеринга?

 export const BigCard = ({Title, Image, Description}) => {
        console.log(Image)
            return(
                <StyledBigCard>
                
                    {!!Image amp;amp; (
                      <StyledImage source={{
                          uri: Image,
                      }}/>
                    )}
                    
                    <StyledStroke>
                        <StyledStrokeText>
                            <StyledPBigCard>{Description}</StyledPBigCard>
                        </StyledStrokeText>
                        <FontAwesomeIcon style={style.icon} size={ 22 } icon={faChevronRight} />
                    </StyledStroke>
                </StyledBigCard>
        )
};

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

1. Вау, ошибка была не из этого кода, но это был повторно используемый компонент, и на другом экране я отправил ему неверную ссылку, спасибо за помощь, я закрою вопрос

Ответ №2:

Проблема не в моем коде выше, я сделал то, что на моем рабочем столе я отправил неверный реквизит для отправки изображения

 Image={Require('../../assets/Image.png')}

вот почему произошла ошибка. я установил его на

 Image={'https://s3.eu-central-1.wasabisys.com/image-parttime-bijbelschool-jaar-1/Track1Module1Thumbnail.jpg'}

и это прекрасно работает!

Метки: ,