不变违规：元素类型无效：预期为字符串。 （图像错误）

Question

im试图在react native中创建一个组件。

该组件的示例为：

import React from 'react'
import PropTypes from 'prop-types'
import { View, Text, Image } from 'react-native'


const MyComponent = ({Text, Image}) => {

  return (
    <Text>{Text}</Text>
    <Image source={require('../../assets/images/HeaderLogo.png')} />
  )
}

MyComponent.propTypes = {
  Text: PropTypes.string, 
  Image: PropTypes.string,
}

export default MyComponent

如果我删除了该组件，则一切正常，但当我尝试使用图像组件时，它在以下图像上返回错误：

（它适用于图标，但不适用于图像。）

该组件的导入如下：

import MyComponent from './MyComponent'

如果我将导入更改为：

import { MyComponent } from './MyComponent'

我遇到另一个错误（如下）：

Answer 1

您不需要传递Text和Image作为道具，因为您可以导入它们。大写名称用于组件。

React也希望渲染一个顶级元素，而您要传递两个。要进行此工作，您需要将它们包装在View中：

const MyComponent = ({text}) => {

  return (
    <View>
      <Text>{text}</Text>
      <Image source={{uri: require('../../assets/images/HeaderLogo.png')}} />
    </View>
  )
}

Answer 2

尝试像这样导入和使用图片

import myIMage from '../../sourcefile.png'

const Component = (props) => {
return (
<View>
<View />
<Image source={myImage} style={{height: 100, width: 100}} /> //style is important here 
</View>

export default Component;

Answer 3

您正在将文本和图像作为参数（属性）传递给函数。

1. 不确定在哪里使用图像道具；如果不是，则应将其删除。
2. 至于Text参数，您需要将其更改为小写 t 的 text 。作为prop传递的任何内容本质上都是函数的参数。使用大写字母T与JSX Text元素冲突，该元素在渲染功能中使用，并且键入 以便渲染相关的UI元素。

简而言之，请删除对您传入的 text 和 image 参数的所有大写引用。您的代码应如下所示：

import React from 'react'
import PropTypes from 'prop-types'
import { View, Text, Image } from 'react-native'


const MyComponent = (text) => {

  return (
    <Text>{text}</Text>
    <Image source={require('../../assets/images/HeaderLogo.png')} />
  )
}

MyComponent.propTypes = {
  text: PropTypes.string, 
}

export default MyComponent