React Native - Invariant Violation: недопустимый тип элемента: ожидаемая строка, но получено: undefiend - PullRequest
Новая
       52

React Native - Invariant Violation: недопустимый тип элемента: ожидаемая строка, но получено: undefiend

0 голосов
/ 31 марта 2020

Так что, когда я использую этот код, все работает просто отлично: 

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: null,
  };

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

После этого все, что я изменяю, находится внутри моего метода redner (), и код выглядит так: 

   ...

export default class ImagePickerExample extends React.Component {
  
  state = {
    image: null,
  };

  render() {
    let { image } = this.state;

    return (
      <TouchableWithoutFeedback onPress={() => {
        //whenever touched the soroundings, keyboard will be dismissed
        Keyboard.dismiss();
      }}>
  
      <View style={styles.container}>
  
        <KeyboardAvoidingView behavior='position'>
  
        <SimpleAnimation delay={500} duration={1200} fade staticType='bounce'>
          <Text style={{color: thirdColor, fontSize: 61}}>Welcome back</Text>
        </SimpleAnimation>

        {image &&
        <TouchableOpacity onPress={this._pickImage}>
          <Ionicons name="ios-person" size={100} color={thirdColor} ></Ionicons>
        </TouchableOpacity>} 
  
        <SimpleAnimation delay={600} duration={1200} fade staticType='bounce'>
        <View style={styles.contYourName}>
        <TextInput placeholder='Username' style = {styles.yourName}></TextInput>
        </View>
        </SimpleAnimation>
  
        <SimpleAnimation delay={900} duration={1200} fade staticType='bounce'>
        <View style={styles.regButtonView}>
        <FlatButton text='finsih' onPress={alert}/>
        </View>
        </SimpleAnimation>
  
        </KeyboardAvoidingView>
  
      </View>
  
      </TouchableWithoutFeedback>
  );
}

...

После этого я получаю следующее сообщение об ошибке на моем iPhone через Expo:

код ошибки от IOS

Что с ним не так? Моя текущая версия React Native:

  • Reaction-native-cli: 2.0.1
  • Reaction-native: 0.61.4

РЕДАКТИРОВАТЬ: Здесь это функции: 

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

Еще один РЕДАКТИРОВАТЬ:

Как только я комментирую все <SimpleAnimation></SimpleAnimation>, чем все снова работает. Почему <SimpleAnimation></SimpleAnimation> проблема?

Ответы [ 3 ]

1 голос
/ 31 марта 2020
  1. Проверьте все импортированные методы, которые вы использовали.
  2. используйте this.state.image вместо изображения.
  3. Перезапустите или перезагрузите
1 голос
/ 31 марта 2020

изменить состояние изображения на "" (пустая строка) вместо нуля или обработать нулевое состояние изображения 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>
);
0 голосов
/ 31 марта 2020

Таким образом, проблема была в тегах <SimpleAnimation></SimpleAnimation> в моем render (). Это потому, что каким-то образом этот импорт испортился. Поэтому я сделал следующее, что решило мою проблему:

  1. npm uninstall react-native-simple-animations
  2. npm install react-native-simple-animations
  3. После этого импортируйте в ваш код: import { SimpleAnimation } from 'react-native- simple-animations'; не забывайте { }
...