react-native - 在 React Native 中访问静态/本地镜像

Question

在我的 React Native 项目文件夹中，我有包含组件的 src 文件，以及一些我想在 iOS 和 Android 上使用的图像。如果我使用这个:

<Image style={{ width: 200, height: 200 }} source={require('../images/camera.png')} />

然后图像就可以完美加载了。但是，图像标签中的源将在用户拍照时动态创建。这段代码:

<Image style={{ width: 200, height: 200 }} source={{ uri: '../images/camera.png' }} />

不起作用。没有抛出错误，但没有显示图像。我确信我走在正确的轨道上，因为当我用 Prop ( <Image style={{ width: 200, height: 200 }} source={{ uri: this.props.image }} /> )替换源时，它会使用相同的代码返回相机拍摄的图像并存储在设备上，但对于静态图像，它不会发生。有建议吗？

Answer 1

对于静态图像，您需要指定如下source

source={require('static_image_path_relative_current_directory')

仅对于远程和本地文件(非静态)，我们需要在 source 中指定 uri，如下所示

source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}