Expo React Native iOS端调用SecureStore.setItemAsync报错求助

环境版本 #

• expo: 44.0.5
• react-native: 0.64.3 (SDK 44)
• expo-secure-store: 11.1.0
• expo-dev-client: 0.8.6
• react & react-dom 18.0.0
• typescript

代码实现 #

App.tsx #

import 'expo-dev-client'
import { deleteValueFor, getValueFor, save } from './src/core/infrastructure/storage/secureStore'
import { REFRESH_TOKEN } from './src/core/infrastructure/config/constants'
....

export default function App(): JSX.Element | null {
  ....

  useEffect(() => {
    ;(async () => {
     try {
      const refreshToken = await getValueFor(REFRESH_TOKEN)
      ...
      // 使用refreshToken的逻辑
      ...
     } catch (e) {
      console.warn(e)
     }
    })()
   }, [])

   const login = async (authUser: AuthUser) => {
     const { token, refreshToken, user } = authUser

     if (!user) {
      throw 'Error al obtener los datos del usuario desde el context'
     }

     setToken(token)
     save({ key: REFRESH_TOKEN, value: refreshToken }) // 错误发生在此处
   }
}

secureStore.ts #

import * as SecureStore from 'expo-secure-store'

export async function save({ key, value }: { key: string; value: string }): Promise<void> {
 await SecureStore.setItemAsync(key, value)
}

export async function getValueFor(key: string): Promise<string | null> {
  try {
   return await SecureStore.getItemAsync(key)
  } catch (error) {
   return null
  }
}

export async function deleteValueFor(key: string): Promise<void> {
  await SecureStore.deleteItemAsync(key)
}

export async function checkAvailability(): Promise<boolean> {
  return SecureStore.isAvailableAsync()
}

运行方式与错误信息 #

使用命令 expo start --dev-client --ios 在iOS模拟器启动应用，启动正常，但点击登录按钮调用save方法时抛出错误：

[Unhandled promise rejection: Error: The method or property SecureStore.setItemAsync is not available on ios, are you sure you've linked all the native dependencies properly?]
at http://192.168.1.3:8082/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:111339:321 in _createSuperInternal
at node_modules/expo-modules-core/build/errors/CodedError.js:10:8 in constructor
at http://192.168.1.3:8082/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:111384:321 in _createSuperInternal
at node_modules/expo-modules-core/build/errors/UnavailabilityError.js:9:42 in constructor
at node_modules/expo-secure-store/build/SecureStore.js:103:14 in setItemAsync
at node_modules/expo-secure-store/build/SecureStore.js:97:7 in setItemAsync
at src/core/infrastructure/storage/secureStore.ts:4:8 in save
at src/core/infrastructure/storage/secureStore.ts:3:7 in save
at App.tsx:87:4 in login

解决方法 #

1. 重新构建开发客户端：使用expo-dev-client时，新增或更新原生模块后必须重新构建客户端，执行命令：

   expo run:ios
   

   构建完成后再用expo start --dev-client --ios启动应用。

2. 修复异步调用问题：原代码中save是异步函数，调用时未添加await，导致未处理的Promise，这也是报错中Unhandled promise rejection的原因之一，修改login函数：

   const login = async (authUser: AuthUser) => {
     const { token, refreshToken, user } = authUser
   
     if (!user) {
      throw 'Error al obtener los datos del usuario desde el context'
     }
   
     setToken(token)
     // 添加await并包裹try/catch处理异常
     try {
       await save({ key: REFRESH_TOKEN, value: refreshToken })
     } catch (err) {
       console.error('保存refreshToken失败:', err)
     }
   }
   

3. 添加可用性前置检查：在调用SecureStore方法前先验证环境支持，避免因设备限制报错：

   const login = async (authUser: AuthUser) => {
     const { token, refreshToken, user } = authUser
   
     if (!user) {
      throw 'Error al obtener los datos del usuario desde el context'
     }
   
     const isSecureStoreAvailable = await checkAvailability()
     if (!isSecureStoreAvailable) {
       console.error('当前设备不支持SecureStore')
       return
     }
   
     setToken(token)
     try {
       await save({ key: REFRESH_TOKEN, value: refreshToken })
     } catch (err) {
       console.error('保存refreshToken失败:', err)
     }
   }
   

4. 重新安装依赖：若以上步骤无效，尝试重新安装expo-secure-store确保依赖正常：

   npm uninstall expo-secure-store
   npm install expo-secure-store@11.1.0
   

内容的提问来源于stack exchange，提问作者Danny P