React Native Algolia即时搜索和SearchBox

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创建)....‘

当我删除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;