[英]React Native Algolia Instant Search & SearchBox
When following the Algolia docs ( https://www.algolia.com/doc/api-reference/widgets/react/ ) to setup a simple search of the Alogila index with the following code 在遵循Algolia文档( https://www.algolia.com/doc/api-reference/widgets/react/ )时,可以使用以下代码对Alogila索引进行简单搜索
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {Text, View, StyleSheet, Button, TextInput} from 'react-native';
import algoliasearch from 'algoliasearch/lite';
import { InstantSearch, Index, SearchBox, Hits } from 'react-instantsearch-dom';
const searchClient = algoliasearch(
'**********', //app ID
'************************' //app key
);
class MyApp extends Component {
constructor(props){
super(props);
}
render(){
return (
<View style={{
flex: 1,
alignItems: "center",
flexDirection: "column",
paddingTop: 20
}}>
<InstantSearch
searchClient={searchClient}
indexName="dev_INVENTORY">
<SearchBox/>
</InstantSearch>
</View>
)}
};
const styles = StyleSheet.create({});
export default MyApp;
I get the error 'Invariant Violation: View config not found for name input. 我收到错误消息“ Invariant Violation:找不到名称输入的视图配置。 Make sure to start component names with a capital letter.
确保组件名称以大写字母开头。
This error is located at in input (created by Searchbox)....' 此错误位于输入(由Searchbox创建)中。...'
When I remove the SearchBox code the app functions fine but as soon as I add it i come across the error, but clearly all the elements are capitalized correctly (unless i've made a ridiculous silly oversight!?) I wondered if the error was related to this persons issue; 当我删除SearchBox代码时,应用程序功能正常,但是一旦添加,我就会遇到错误,但显然所有元素都正确大写(除非我进行了可笑的愚蠢的监督!?)我想知道错误是否是有关此人的问题; Using Algolia react-instantsearch with react-native but i dont think it is.
使用Algolia react-instantsearch和react-native,但我认为不是。
If anyone has any suggestions just so I can get started with searching Algolia that would be ace as I'm a bit stuck! 如果有人有任何建议,那么我就可以开始搜索阿尔戈利亚,因为我有点被卡住了,这将是王牌!
The issue is that you're trying to use some widgets from react-instantsearch-dom
which are not compatible with React Native. 问题是您正在尝试使用
react-instantsearch-dom
中的某些与React Native不兼容的小部件。
For React Native you'll need to use the connectors instead of the widgets: https://www.algolia.com/doc/guides/building-search-ui/going-further/native/react/#using-connectors-instead-of-widgets 对于React Native,您需要使用连接器而不是小部件: https : //www.algolia.com/doc/guides/building-search-ui/going-further/native/react/#using-connectors-instead -of-部件
In your case it should give you something like: 在您的情况下,它应该给您类似的东西:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { View, StyleSheet, TextInput } from 'react-native';
import algoliasearch from 'algoliasearch/lite';
import { InstantSearch, connectSearchBox } from 'react-instantsearch-native';
const searchClient = algoliasearch(
'**********', // app ID
'************************' // app key
);
class SearchBox extends Component {
render() {
return (
<View>
<TextInput
onChangeText={text => this.props.refine(text)}
value={this.props.currentRefinement}
placeholder={'Search a product...'}
clearButtonMode={'always'}
spellCheck={false}
autoCorrect={false}
autoCapitalize={'none'}
/>
</View>
);
}
}
SearchBox.propTypes = {
refine: PropTypes.func.isRequired,
currentRefinement: PropTypes.string,
};
const ConnectedSearchBox = connectSearchBox(SearchBox);
class MyApp extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View
style={{
flex: 1,
alignItems: 'center',
flexDirection: 'column',
paddingTop: 20,
}}
>
<InstantSearch searchClient={searchClient} indexName="dev_INVENTORY">
<ConnectedSearchBox />
</InstantSearch>
</View>
);
}
}
const styles = StyleSheet.create({});
export default MyApp;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.