文本字符串必须在 <Text> 组件中呈现。使用 Algolia React Native

Question

我刚开始将 Algolia 与 React Native 和 Expo 结合使用，我想将它集成到我的移动应用程序中。

import { SafeAreaView, StyleSheet, View, Text } from 'react-native'
import algoliasearch from 'algoliasearch/lite';
import { InstantSearch, SearchBox, InfiniteHits } from "react-instantsearch-dom";
import { I18nContext } from '../../translation';
import TitleHolder from '../../Components/TitleHolder_noback';
import BottomBar from '../../Components/bottom_bar';

const Search = props => {
    const { translate } = useContext(I18nContext);
    const searchClient = algoliasearch('XXXXXXXXX', 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
    const Hit = ({ hit }) =>
        <View>
            <Text>{hit.rep_first_name}</Text>
            <Text>{hit.rep_last_name}</Text>
        </View>;

    return (
        <Fragment>

            <SafeAreaView style={{ flex: 0, backgroundColor: '#009CF3' }} />
            <SafeAreaView style={styles.container}>
                <TitleHolder title={translate("all_reps_title")} />
                <View>
                    <InstantSearch searchClient={searchClient} indexName='rep_lookup'>
                        <SearchBox searchAsYouType={false} translations={{ placeholder: 'Rechercher un parlementaire' }} /> {/* use a translate here */}
                        <InfiniteHits hitComponent={Hit} />
                    </InstantSearch>
                </View>
                <BottomBar />
            </SafeAreaView>
            <SafeAreaView style={{ flex: 0, backgroundColor: 'white' }} />
        </Fragment>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
});

export default Search;

我有这个错误：

如果有人有什么想法？我确信我的组件和 BottomBar 工作得很好。

Answer 1

line 36 还剩一些 blank spaces。把它清理干净。只需复制并粘贴此代码。

import { SafeAreaView, StyleSheet, View, Text } from "react-native";
import algoliasearch from "algoliasearch/lite";
import {
  InstantSearch,
  SearchBox,
  InfiniteHits,
} from "react-instantsearch-dom";
import { I18nContext } from "../../translation";
import TitleHolder from "../../Components/TitleHolder_noback";
import BottomBar from "../../Components/bottom_bar";

const Search = (props) => {
  const { translate } = useContext(I18nContext);
  const searchClient = algoliasearch(
    "XXXXXXXXX",
    "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
  );
  const Hit = ({ hit }) => (
    <View>
      <Text>{hit.rep_first_name}</Text>
      <Text>{hit.rep_last_name}</Text>
    </View>
  );

  return (
    <Fragment>
      <SafeAreaView style={{ flex: 0, backgroundColor: "#009CF3" }} />
      <SafeAreaView style={styles.container}>
        <TitleHolder title={translate("all_reps_title")} />
        <View>
          <InstantSearch searchClient={searchClient} indexName="rep_lookup">
            <SearchBox
              searchAsYouType={false}
              translations={{ placeholder: "Rechercher un parlementaire" }}
            />
            <InfiniteHits hitComponent={Hit} />
          </InstantSearch>
        </View>
        <BottomBar />
      </SafeAreaView>
      <SafeAreaView style={{ flex: 0, backgroundColor: "white" }} />
    </Fragment>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white",
  },
});

export default Search;

Answer 2

我阅读了越来越多的 Algolia 文档，但我无法将 Algolia Widget 与 React Native 和 Expo 一起使用，我必须使用自定义小部件，如 connectSearchBox

https://www.algolia.com/doc/guides/building-search-ui/going-further/native/react/

文本字符串必须在 <Text> 组件中呈现。使用 Algolia React Native

Text strings must be rendered within a <Text> component. Using Algolia React Native

react-native

algolia

expo