React Native + Expo环境渲染Algolia InstantSearch时App崩溃如何解决

• 该报错核心原因是react-instantsearch-native的部分底层代码默认依赖浏览器环境的window.navigator对象，但React Native运行环境中不存在浏览器专属的window对象，更没有navigator.userAgent属性，访问该不存在的属性时直接抛出类型错误。
• 另一个常见触发场景是使用了web端适配的algolia searchClient，未做React Native环境兼容，也会触发对window对象的访问逻辑。

方案1：全局模拟window.navigator属性（快速修复） #

在项目入口文件（如App.js、index.js）的最顶部添加如下代码，在库加载前提前模拟好缺失的浏览器对象：

// 若同时存在URL相关报错可添加该polyfill
import 'react-native-url-polyfill/auto';

if (!window.navigator) {
  window.navigator = {
    userAgent: 'react-native'
  }
}

注意该代码需要放在所有react-instantsearch-native相关引入逻辑的前面。

方案2：使用React Native适配的searchClient #

不要使用web端的algoliasearch包，切换为适配原生端的客户端实现：

1. 安装依赖：

npm install @algolia/client-search react-native-url-polyfill
# 或使用yarn
yarn add @algolia/client-search react-native-url-polyfill

2. 初始化适配RN的searchClient：

import 'react-native-url-polyfill/auto';
import { algoliasearch } from '@algolia/client-search';

const searchClient = algoliasearch('你的Algolia APP ID', '你的搜索权限密钥');

方案3：升级到最新版的react-instantsearch-native #

官方在较新的版本中已经修复了React Native环境下的window对象兼容问题，若当前使用的是v6及以下的旧版本，可直接升级到稳定最新版：

npm install react-instantsearch-native@latest
# 或使用yarn
yarn add react-instantsearch-native@latest

内容的提问来源于stack exchange，提问作者Guy Binya