React Native Algolia Instantsearch期望一个组件类,得到[object Object]

时间:2016-12-09 18:07:32

标签: react-native algolia

当我将关于Algolia React Native文档时出现的以下代码添加到index.android.js的新的反应原生项目时。我收到这个错误:

  

“期望一个组件类,得到[object Object]。

这是代码,与Algolia React Native指南中显示的代码相同,您可以找到here

import React, {Component} from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView,
  TextInput,
  Image,
} from 'react-native';
import {InstantSearch} from 'react-instantsearch/native';
import {connectSearchBox, connectInfiniteHits} from 'react-instantsearch/connectors';

export default InfiniteSearch = () =>
  <View style={styles.maincontainer}>
    <InstantSearch
      className="container-fluid"
      appId="appId"
      apiKey="apiKey"
      indexName="indexName"
    >
      <SearchBox/>
      <Hits/>
    </InstantSearch>
  </View>;

const SearchBox = connectSearchBox(({currentRefinement, refine}) =>
  <TextInput
    style={{height: 40, borderColor: 'gray', borderWidth: 1}}
    onChangeText={(text) => refine(text)}
    value={currentRefinement}
  />
);

const Hits = connectInfiniteHits(React.createClass({
  onEndReached: function () {
    if (this.props.hasMore) {
      this.props.refine();
    }
  },

  render: function () {
    const dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    const hits = this.props.hits.length > 0 ?
      <View style={styles.maincontainer}>
        <ListView
        style={styles.list}
        dataSource={dataSource.cloneWithRows(this.props.hits)}
        renderRow={this._renderRow}
        onEndReached={this.onEndReached}/>
      </View> :
      null;

    return hits;
  },

  _renderRow: function (hit) {
    return (
      <View style={styles.item}>
        <Image
          style={{height: 100, width: 100}}
          source={{uri: hit.image}}
        />
        <Text>{hit.name}</Text>
      </View> );
    },
  }));

const styles = StyleSheet.create({
  maincontainer: {
    backgroundColor: 'white',
    flex: 1,
    paddingTop: 20,
    paddingBottom: 10,
    flexDirection: 'column',
  },
  list: {
    flex: 1,
    flexDirection: 'column',
  },
  item: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'white'
  }
});

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

0 个答案:

没有答案