使用Algolia react-instantsearch with react-native

时间:2016-12-09 16:34:25

标签: reactjs react-native algolia react-instantsearch

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

我一直关注着guide而且我完全陷入困境。

基本上,每当我尝试在<SearchBox />组件中添加<InstantSearch />组件时,我的应用程序就会死于预期的组件类,得到[object Object] 。< / p>

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

代码(我具有appId,apiKey和&amp; index的实际值):

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,
    },
});

2 个答案:

答案 0 :(得分:1)

答案 1 :(得分:0)

尝试在SearchBox中包装TextInput:

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