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;

我收到错误消息“ Invariant Violation：找不到名称输入的视图配置。确保组件名称以大写字母开头。

此错误位于输入（由Searchbox创建）中。...'

当我删除SearchBox代码时，应用程序功能正常，但是一旦添加，我就会遇到错误，但显然所有元素都正确大写（除非我进行了可笑的愚蠢的监督！？）我想知道错误是否与这个人的问题有关； Using Algolia react-instantsearch with react-native，但我认为不是。

如果有人有任何建议，那么我就可以开始搜索阿尔戈利亚，因为我有点被卡住了！

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;

React Native Algolia即时搜索和SearchBox

1 个答案: