React-native：图像未呈现

问题描述

我正在学习 React Native，只是想在 container.View 和 title.Text 中添加一个图像。什么都没有显示。我尝试从资产文件夹和通过 uri 访问它。

我的资产文件夹在 components 文件夹之外。

import React,{ useState,useEffect } from 'react'
import styled from 'styled-components/native'
import { Text,Image,View } from 'react-native'

import { MAGIC_API } from './reusable/urls';


export const MagicAnswerList = () => {
  const [magicAnswer,setMagicAnswer] = useState([])

    useEffect(() => {
    fetch(MAGIC_API)
      .then(res => res.json())
      .then(magicdata => setMagicAnswer(magicdata))
      .catch(err => console.error(err))
  },[])

 return (
    <Container>
        <Title>
          {magicAnswer.Answer}
          <MagicBall 
            source={require('../assets/billiard.png')}
          /> 
        </Title>
    </Container>
  )
}

解决方法

我没有看到您的 <Image /> 被使用。我看到的是 <MagicBall />。我建议你尝试渲染一些更简单的东西，看看会发生什么。

,

您需要向 style 标签添加 <Image /> 参数。例如：

<Image
    source={require('../assets/billiard.png')}
    style={{
        height: 100,width: 100,resizeMode: 'contain'
    }}
/>

请注意，width 和 height 参数是使其可见所必需的。