使用ActivityIndi​​catorIOS时,React Native Element Type无效错误

时间:2017-03-26 04:28:17

标签: ios reactjs react-native

我已经开始使用React和Google Books API开发图书搜索应用程序。但是,我遇到了一个错误,我的模拟器在这里写道:

Element Type is invalid: expected a string (for built-in components) or
a class/function (for composite components) but got: undefined. Check
the render method of 'BookList'. 

鉴于我对React还不熟悉,我希望有人能够在下面的代码中指出错误。我已经注意到我认为可能存在错误的地方。谢谢!

class BookList extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
          isLoading: true,
          dataSource: new ListView.DataSource({
              rowHasChanged: (row1, row2) => row1 !== row2
          })
      };
    }

   componentDidMount() {
      this.fetchData();
   }

   fetchData() {
      fetch(REQUEST_URL[0])
      .then((response) => response.json())
      .then((responseData) => {
          this.setState({
              dataSource: this.state.dataSource.cloneWithRows(responseData.items),
              isLoading: false
          });
       })
      .done();
      }

    render() {
       if (this.state.isLoading) {
           return this.renderLoadingView();
       }

   return (
        <ListView
            dataSource={this.state.dataSource}
            renderRow={this.renderBook.bind(this)}
            style={styles.listView}
            />
        );
    }  

// *** adding this function (and using it) began to cause issues ****

    renderLoadingView() {
        return (
           <View style={styles.loading}>
               <ActivityIndicatorIOS
                   size='large'/>
               <Text>
                   Loading books...
               </Text>
           </View>
       );
     }

   renderBook(book) {
      return (
           <TouchableHighlight>
               <View>
                   <View style={styles.container}>
                       <Image
                           source={{uri: book.volumeInfo.imageLinks.thumbnail}}
                           style={styles.thumbnail} />
                    <View style={styles.rightContainer}>
                        <Text style={styles.title}>{book.volumeInfo.title}</Text>
                        <Text style={styles.author}>{book.volumeInfo.authors}</Text>
                        <Text style={styles.price}>{'Lowest Available Price: ' + book.volumeInfo.price}</Text>
                    </View>
                </View>
                <View style={styles.separator} />
            </View>
        </TouchableHighlight>
   );
 }
}

var REQUEST_URL = ['https://www.googleapis.com/books/v1/volumes?q=subject:fiction'];

1 个答案:

答案 0 :(得分:1)

ActivityIndi​​catorIOS 折旧后使用 ActivityIndicator