React Native中如何配置Algolia带筛选条件的搜索？

你可以通过react-instantsearch-native提供的Configure组件来配置原Ionic代码中的所有参数，以下是对应配置方式：

1. 配置筛选条件（filters） #

将原有的filters字符串直接传入Configure组件的filters属性即可：

import { Configure } from 'react-instantsearch-native';

// 假设STATUS和ROLE是你定义的常量
<Configure filters={`(status = ${STATUS.ACTIVE}) AND (role = ${ROLE.BARMAN} OR role = ${ROLE.ADMIN})`} />

2. 指定返回属性（attributesToRetrieve） #

在Configure中设置attributesToRetrieve参数，传入需要的属性数组：

<Configure attributesToRetrieve={['fullName', 'uid']} />

3. 设置每页结果数（hitsPerPage） #

通过Configure的hitsPerPage属性配置每页加载的数量：

<Configure hitsPerPage={1000} />

4. 分页控制（page） #

由于你使用的是InfiniteHits组件，它会自动处理滚动加载分页，无需手动控制page参数。如果需要手动切换页码（比如非无限滚动场景），可以通过Configure动态修改page值。

完整整合示例 #

把所有配置放在InstantSearch组件内部即可：

import { InstantSearch, Configure, InfiniteHits } from 'react-instantsearch-native';
import algoliasearch from 'algoliasearch';

const searchClient = algoliasearch('你的APP_ID', '你的API_KEY');

const SearchScreen = () => {
  return (
    <InstantSearch searchClient={searchClient} indexName="你的索引名">
      {/* 所有配置项 */}
      <Configure
        filters={`(status = ${STATUS.ACTIVE}) AND (role = ${ROLE.BARMAN} OR role = ${ROLE.ADMIN})`}
        attributesToRetrieve={['fullName', 'uid']}
        hitsPerPage={1000}
      />
      {/* 无限滚动展示结果 */}
      <InfiniteHits hitComponent={({ hit }) => <div>{hit.fullName}</div>} />
    </InstantSearch>
  );
};

export default SearchScreen;

内容的提问来源于stack exchange，提问作者Pasan Induwara