将 Algolia react-instantsearch 与 react-native 结合使用答案

【问题标题】：Using Algolia react-instantsearch with react-native将 Algolia react-instantsearch 与 react-native 结合使用
【发布时间】：2017-09-12 21:46:24
【问题描述】：

我正在尝试使用 react-native 获取新的 Algolia react-instantsearch 组件。

我一直在关注guide，但我完全被卡住了。

基本上，每当我尝试在<InstantSearch /> 组件中添加我的<SearchBox /> 组件时，我的应用都会因Expected a component class, got [object Object]而死掉。

据我所知，我正在将 <SearchBox /> 连接到 connectSearchBox 连接器，所以我不确定发生了什么。

代码（我确实有 appId、apiKey 和索引的真实值）：

import React, {Component} from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView,
  TextInput,
  Image,
} from 'react-native';
import {InstantSearch} from 'react-instantsearch/native';
import {connectSearchBox} from 'react-instantsearch/connectors';
import * as Styles from '../../styles/';

const SearchBox = connectSearchBox(({currentRefinement, refine}) =>
  <TextInput
    style={{height: 40, borderColor: 'gray', borderWidth: 1}}
    onChangeText={(text) => refine(text)}
    value={currentRefinement}
  />);

export default class InfiniteSearch extends Component {
  constructor(props) {
    super(props);
  }

    render() {
        return (
            <View style={styles.container}>
              <InstantSearch
                className="container-fluid"
                appId="appId"
                apiKey="apiKey"
                indexName="indexName"
              >
                <SearchBox />
              </InstantSearch>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
      padding: 10,
    },
});

【问题讨论】：

它绝对符合我所看到的指南......它说错误在哪里？
@MattAft 堆栈跟踪没有指向我代码中的任何特定内容。以 <unknown> -> createInternalComponent -> instantiateReactComponent -> peformInitialMount 开头，然后是内部 React 内容的页面和页面。
这肯定是由<InstantSearch> 内部的<SearchBox /> 组件引起的。如果我删除它，没有错误。
我们正在开发补丁。 github.com/algolia/instantsearch.js/pull/1729
@bobylito 感谢您的信息。我已经开始关注那个 PR，这样我就可以在它合并后获取更新。

标签： reactjs react-native algolia react-instantsearch

【解决方案2】：

尝试将 TextInput 包装在 SearchBox 中：

const SearchBox = connectSearchBox(({currentRefinement, refine}) => (
  <TextInput
    style={{height: 40, borderColor: 'gray', borderWidth: 1}}
    onChangeText={(text) => refine(text)}
    value={currentRefinement}
  />
));

【讨论】：