Question

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

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

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

这应该是Image的非常基本的用法，但是为什么什么都没有显示？

Answer 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}} />

Answer 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'}} />

Answer 3

要显示图像，您需要先获取图像

import myImage from './path_to_image.png'

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

有关更多信息，您有this documentation

Answer 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。

例如，所有这些都将存在于您的子组件中，请记住，您没有指定所使用的组件。确保图像已渲染后，您便要转到父组件并将其传递给您使用任意名称的道具，例如imageSource。

然后您再次传递要求和相对路径：

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将是一个标识符，所以不用担心，但是我把它放在那里，以防万一您看到它。

现在，您可以在子组件中将require('/storage/emulated/0/saved_signature/signature.png')道具中的source={}移除，并用<Image source={props.imageSource} />或任何您称呼的东西代替。

反应本机图像未出现

4 个答案: