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 代码时，应用程序功能正常，但一旦添加它，我就会遇到错误，但显然所有元素的大写都正确（除非我做了一个可笑的愚蠢的疏忽！？）我想知道错误是否是与此人的问题有关； 将 Algolia React-instantsearch 与 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;