Question

react-native非常新，卡在＆＃39;元素类型上无效错误＆＃39;

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  ActivityIndicatorIOS,
  View
} from 'react-native';

export default class SplashWalls extends Component {

    constructor(props) {
    super(props);

    this.state = {
      wallsJSON: [],
      isLoading: true
    };
  }

  fetchWallsJSON() {
    var url = 'https://unsplash.it/list';
    fetch(url)
      .then( response => response.json() )
      .then( jsonData => {
        console.log(jsonData);

        this.setState({isLoading: false}); //update isLoading
      })
    .catch( error => console.log('Fetch error ' + error) );
  }

  componentDidMount() {
      this.fetchWallsJSON();
  }

  render() {
    var {isLoading} = this.state;
    if(isLoading)
      return this.renderLoadingMessage();
    else
      return this.renderResults();
  }

  renderLoadingMessage() {
    return (

   <View style={styles.loadingContainer}>
        <ActivityIndicatorIOS
          animating={true}
          color={'#fff'}
          size={'small'}
          style={{margin: 15}} />
          <Text style={{color: '#fff'}}>Contacting Unsplash</Text>

   </View>
    );
  }

  renderResults() {
    return (

   <View>
        <Text>
          Data loaded
        </Text>

   </View>
    );
  }

}

const styles = StyleSheet.create({
  loadingContainer: {
      flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#000'
  }
});

AppRegistry.registerComponent('SplashWalls', () => SplashWalls);

错误状态：

元素类型无效：需要一个字符串（用于内置组件）   或类/函数（对于复合组件）但得到：undefined。您   可能忘记从其定义的文件中导出组件。

检查＆＃39; SplashWalls＆＃39;。
的渲染方法

有什么想法吗？

Answer 1

这里的问题是你的

<ActivityIndicatorIOS />

此组件已弃用，必须替换为

<ActivityIndicator>

可在此处找到更多信息：https://facebook.github.io/react-native/docs/activityindicator.html

要继续this教程，您必须进行以下更改：

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ActivityIndicator,
} from 'react-native';

和

renderLoadingMessage () {
    return (
      <View style={styles.loadingContainer}>
        <ActivityIndicator
          animating={true}
          color={'#fff'}
          size={'small'} 
          style={{margin: 15}} />
        <Text style={{color: '#fff'}}>Contacting Unsplash</Text>
      </View>
   )
 }

React-native元素类型无效 - 导出

1 个答案: