作为道具传递的加载图像反应原生

Question

当我尝试从道具加载图像时,我收到以下错误 警告:失败的道具类型:source提供的无效道具image 这里是我的代码

SRC /组件/普通/ Header.js

<View style={viewStyle}>
  <Text style={textStyle}>{props.children}</Text>
  <Image style={{height:25, width:25}} source={props.imageUri} />
</View>

SRC/index.js

<Header imageUri='../../images/logout.png'>My App</Header>

图像位于路径src/images/logout.png

请帮忙

Answer 1

正如React Native Documentation 所说，在编译包之前需要加载所有图像源。

在 React Native 中添加一个简单的图片应该是这样的：

<Image source={require('./path_to_your_image.png')} />

假设你有这个：

const slides = {
  car: './car.png',
  phone: '../phone.png',
}

然后你slides作为参数传递，但仍然不能像这样使用它（即使逻辑上应该有效）：

<Image source={require(props.car)} />

使用require()内sildes{}

const slides = {
  car: require('./car.png'),
  phone: require('../phone.png'),
}

像这样使用它：

<Image source={props.car}/>

Answer 2

你的来源是错的.

它应该使用uri属性.

您使用require:

<Image source={require('.../../images/logout.png')} />

反过来,你也可以要求这个道具

<Image source={require(props.imageUri)} />

或者您按原样使用Uri:

<Image source={{uri: props.imageUri }} />

有关详细信息,请参阅文档

Answer 3

您可以从道具中设置图像来源，如下所示：在组件中：

<Image source={props.path} > 

并将源传递给组件，如下所示：在父级中：

<
.
.
path={require("../assets/images/icon.svg")}
.
.
>

Answer 4

使用以下方法给出errorreact-native：

<Image style={{height:25, width:25}} source={require(props.imageUri)} />

而是使用：

<Image style={{height:25, width:25}} source={props.imageUri}/>

并将以下代码作为 imageUri 道具从Parent组件传递。

require('./public/images/image.png')

它对我有用，希望这会对其他人有所帮助。