Dev Faq
0
votes

Réagir Natif - Violation invariante: Le type d'élément n'est pas valide: chaîne attendue mais obtenu: non défini

Alors, quand j'utilise ce code, tout fonctionne bien:

p> 

componentDidMount() {
    this.getPermissionAsync();
    console.log('hi');
  }

  getPermissionAsync = async () => {
    if (Constants.platform.ios) {
      const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
      if (status !== 'granted') {
        alert('Sorry, we need camera roll permissions to make this work!');
      }
    }
  }

  _pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1
    });

    console.log(result);

    if (!result.cancelled) {
      this.setState({ image: result.uri });
    }
  };

2 commentaires

avez-vous importé tout composant que vous avez utilisé ???

@TwinkserPatel ouais je l'ai fait

3 Réponses :

1
votes

Modifier l'état de l'image sur "" (chaîne vide) au lieu de null ou de gérer la condition null de l'image URI; 

import * as React from 'react';
import { Button, Image, View, TouchableOpacity, StyleSheet, TouchableWithoutFeedback, KeyboardAvoidingView, SimpleAnimation, Text, TextInput} from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import Constants from 'expo-constants';
import * as Permissions from 'expo-permissions';
import { Ionicons } from '@expo/vector-icons';
import FlatButton from './button';

const thirdColor = 'red'; 
const secColor = 'blue'; 
const mainColor = 'green'; 

export default class ImagePickerExample extends React.Component {

  state = {
    image: "",
  };

  return (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Button
      title="Pick an image from camera roll"
      onPress={this._pickImage}
    />
    {image &&
      <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
  </View>
);

3 commentaires

Merci pour votre réponse rapide. Je l'ai testé mais il n'a pas fonctionné..Je obtenir le même message d'erreur

Je les ai retournés dans mon poteau en bas. Mais je ne pense pas que ces méthodes seraient le problème car le premier code fonctionne et le second non et la seule chose que j'ai changée est la méthode rendu ()

Donc, je viens de trouver ceci: dès que je commenter tout que tout fonctionne à nouveau. Pourquoi un problème?

1
votes
  1. Vérifiez que toutes les méthodes sont importées que vous avez utilisées.
  2. Utilisez ceci.state.Image au lieu de l'image.
  3. Rerun ou Recharger
2 commentaires

Donc, j'ai essayé mais toujours la même erreur. J'ai remplacé mon rendu complet avec ce premier code et cela a fonctionné. Mais dès que je change le contenu de ma méthode de rendu, je reçois à nouveau l'erreur.

Donc, je viens de trouver ceci: dès que je commenter tout que tout fonctionne à nouveau. Pourquoi un problème?

0
votes

Le problème était donc le Tags dans mon rendu (). C'est parce que cette importation a été gâchée. Donc, j'ai fait ce qui suit que j'ai corrigé mon problème:

  1. NPM désinstallation réactive-natif-simple-animations
  2. NPM Installez React-Native-Simple-Animations
  3. Après cette importation dans votre code avec: importer {Simpleanimation} de 'React-Native- simples-animations'; n'oubliez pas le {}
0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO