javascript - React Native - 不变违规 : Element type is invalid: expected string but got: undefiend

Question

因此，当我使用此代码时，一切正常:

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

...

执行此操作后，我通过 Expo 在 iPhone 上收到以下错误消息:

error code from IOS

这有什么问题吗？我当前的 React Native 版本是:

• react-native-cli:2.0.1
• react 原生: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>有问题吗？

Answer 1

将图像状态更改为“”(空字符串)而不是 null 或处理图像 uri 的 null 条件；

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