反应原生图像'警告：道具类型失败：提供给`Image` 的道具`source` 无效 '

如何解决反应原生图像'警告：道具类型失败：提供给`Image` 的道具`source` 无效 '

这是我的代码 我已经回答了这个问题。

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.Image 时，我得到图像

  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 然后将它更改回它工作的 Image 道具时。但是当我重新加载应用程序时，它又给了我这个错误。

我该如何解决这个问题？

解决方法

在您实际从 Firestore 获取图像数据之前，PBS1Detail 是一个空数组。

所以当第一次渲染时，我猜你是在尝试传递 undefined 或一些无效的值作为源属性。

你给渲染部分一个条件怎么样？

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

,

问题不是我上面的代码，我所做的是在我的主屏幕上我向 Image 发送了错误的道具

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

这就是发生错误的原因。我已经设置为

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

而且效果很好！