反应原生图像未出现答案

【问题标题】：React-native Image not appearing反应原生图像未出现
【发布时间】：2019-08-13 13:06:44
【问题描述】：

我使用的是React-Native v0.60.4，在android模拟器上运行，使用react-native-signature-capture生成图像，图像可以手动打开并正确显示。我想使用Image 显示此图像，但它什么也没显示。

我检查了，但没有错误/警告消息。

<Image
     style={{width: 200, height: 200}}
     source={{uri: '/storage/emulated/0/saved_signature/signature.png'}}
/>

这应该是Image 的基本用法，但为什么什么也没显示？

【问题讨论】：

标签： android react-native react-native-android

【解决方案1】：

使用imagepicker将image带入路径，使用image module，查看image。

例子

import ImagePicker from 'react-native-image-picker';
...
  ImagePicker.showImagePicker(options, response => {
        let source = response;
        this.setState({
          filePath: source,
        });

...
<Image 
          source={{ uri: this.state.filePath.uri}} 
          style={{width: 100, height: 100}} />

【讨论】：

【解决方案2】：

如果您想显示本地图像，则必须使用 require 属性而不是 uri，如下所示：-

来自本地存储的图像：-

<Image 
style={{width: 200, height: 200}}
source={require('/storage/emulated/0/saved_signature/signature.png')} />

对于动态图像或来自uri的图像：-

<Image 
style={{width: 200, height: 200}}
source={{uri: 'https://facebook.github.io/react/logo-og.png'}} />

【讨论】：

【解决方案3】：

要显示图片，你需要先require它

import myImage from './path_to_image.png'

<Image source={myImage} style={{ width: 200, height: 200 }} />

更多信息，您有this documentation

【讨论】：

【解决方案4】：

您需要像这样将require() 传递给source 属性：

const ImageDetail = props => {
  return (
    <View>
      <Image source={require('/storage/emulated/0/saved_signature/signature.png')} />
      <Text>{props.title}</Text>
    </View>
  );
};

确保您的路径也正确，因为它不是../storage 或../../storage。

所有这些都将在您的子组件中，例如，请记住您没有指定您所在的组件。确保图像呈现后，您需要转到父组件并将您选择的任何名称的 prop 传递给它，例如 imageSource。

然后你再次传入那个 require 和相对路径：

const ImageScreen = () => {
  return (
    <View>
      <ImageDetail
        title='Signature One'
        imageSource={require("/storage/emulated/0/saved_signature/signature1.png")}
      />
      <ImageDetail
        title='Signature Two'
        imageSource={require("/storage/emulated/0/saved_signature/signature2.png")}
      />
      <ImageDetail
        title='Signature Three'
        imageSource={require("/storage/emulated/0/saved_signature/signature3.png")}
      />
    </View>
  );
};

然后我会在该子组件上控制台记录道具，如果您的设置与上面的内容相似，您应该会看到：

{title: "Signature One", imageSource: 3}
{title: "Signature Two", imageSource: 4}
{title: "Signature Three", imageSource: 5}

3、4、5 将是一个标识符，所以不用担心，但我把它放在那里以防万一。

现在，在您的子组件中，您可以从您的 source={} 属性中删除该 require('/storage/emulated/0/saved_signature/signature.png') 并将其替换为 <Image source={props.imageSource} /> 或您所称的任何名称。

【讨论】：

谢谢，require 不适用于我的问题，它抱怨错误我通过将file:// 附加到图像路径来修复它