当我将关于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);