react-native - 加载作为 props 传递的图像 react 原生

Question

当我尝试从 Prop 加载图像时，出现以下错误警告:失败的 Prop 类型:提供给图像的 Prop source无效这是我的代码

src/components/common/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

As the React Native Documentation says, all your images sources need to be loaded before compiling your bundle.

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

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

假设你有这个:

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

然后您将 slides 作为参数传递，但您仍然无法像这样使用它(即使逻辑上应该可行):

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

在sildes{}内使用require()

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

然后像这样使用它:

<Image source={props.car}/>