React Native Algolia 即时搜索和搜索框

Question

按照 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;

我收到错误“不变违规：未找到名称输入的视图配置。确保以大写字母开头的组件名称。

此错误位于输入中（由搜索框创建）......'

当我删除 SearchBox 代码时，应用程序运行良好，但一旦我添加它，我就会遇到错误，但显然所有元素都正确大写（除非我做了一个荒谬愚蠢的疏忽！？） 我想知道这个错误是否与这个人的问题有关； Using Algolia react-instantsearch with react-native 但我不这么认为。

如果有人有任何建议，我可以开始搜索 Algolia，因为我有点卡住了！

Answer 1

问题是您正在尝试使用来自 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;