L'image native React n'apparaît pas

Utilisez le imagepicker pour amener l ' image dans le chemin, utilisez le module image et regardez l' image code>.

Exemple

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

si vous voulez afficher une image locale, vous devez utiliser la propriété require au lieu de l'URI comme ceci: -

image du stockage local: -

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

Pour image dynamique ou image de l'URI: -

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

Pour afficher une image, vous devez l'exiger avant

import myImage from './path_to_image.png'

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

Pour plus d'informations, vous avez cette documentation

Vous devez passer un accessoire require () à source comme ceci:

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

Assurez-vous que votre chemin est correct car bien en ce que ce n'est pas ../storage ou ../../storage.

Et tout cela serait dans votre composant enfant par exemple , en gardant à l'esprit que vous n'avez pas spécifié sur quel composant vous vous trouvez. Une fois que vous vous êtes assuré que l'image est rendue, vous voulez aller à votre composant parent et lui transmettre l'accessoire du nom que vous choisissez, par exemple imageSource .

Ensuite, vous passez cela exigent à nouveau et le chemin relatif:

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>
  );
};

Je voudrais alors consigner les accessoires de consoles sur ce composant enfant et si votre configuration est similaire à ce qui précède, vous devriez voir:

XXX

Les 3, 4, 5 seraient un identifiant, alors ne vous inquiétez pas pour ça, mais je le mets juste au cas où vous le verriez.

Maintenant dans votre composant enfant, vous pouvez supprimer ce require ('/ storage / emulated / 0 / saved_signature / signature.png') de votre accessoire source = {} et le remplacer par ou comme vous l'avez appelé.