React-native：图像未渲染

Question

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

我的 assets 文件夹在 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>
  )
}

Answer 1

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

Answer 2

您需要将style 参数添加到您的<Image /> 标记。例如：

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

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