当按照 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;
我收到错误“不变违规:未找到名称输入的 View 配置。确保组件名称以大写字母开头。
此错误位于输入(由搜索框创建)...'
当我删除 SearchBox 代码时,应用程序运行良好,但一旦我添加它,我就会遇到错误,但显然所有元素都正确地大写(除非我做了一个荒谬的愚蠢疏忽!?) 我想知道这个错误是否与这个人的问题有关; Using Algolia react-instantsearch with react-native但我不认为它是。
如果有人有任何建议,那么我就可以开始搜索 Algolia 了,因为我有点卡住了!
最佳答案
问题是您正在尝试使用 react-instantsearch-dom
中的一些小部件,这些小部件与 React Native 不兼容。
对于 React Native,您需要使用连接器而不是小部件:https://www.algolia.com/doc/guides/building-search-ui/going-further/native/react/#using-connectors-instead-of-widgets
在你的情况下,它应该给你类似的东西:
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;
关于reactjs - React Native Algolia 即时搜索和搜索框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57813463/