u

notes/前端开发/react-native/expo.md

@@ -700,6 +700,99 @@ lottie例子网站：https://lottiefiles.com/free-animations
 
 
 
+## 集成zustand和@react-native-async-storage
+
+安装依赖：
+
+```bash
+npx expo install zustand
+npx expo install @react-native-async-storage/async-storage
+```
+
+使用demo：
+```ts
+// store/userStore.ts
+import AsyncStorage from '@react-native-async-storage/async-storage'
+import { create } from 'zustand'
+import { createJSONStorage, persist } from 'zustand/middleware'
+
+interface UserState {
+  userInfo: { userId: string, username: string } | null
+  token: string | null
+  setUserInfo: (userInfo: UserState['userInfo']) => void
+  setToken: (token: string) => void
+  logout: () => void
+}
+
+export const useUserStore = create<UserState>()(
+  persist(
+    (set, get) => ({
+      userInfo: null,
+      token: null,
+      setUserInfo: userInfo => set({ userInfo }),
+      setToken: token => set({ token }),
+      logout: () => {
+        console.log('当前 token:', get().token) // 使用 get 获取最新状态
+        set({ userInfo: null, token: null })
+      },
+    }),
+    {
+      name: 'user-storage', // 存储在 AsyncStorage 的 key
+      storage: createJSONStorage(() => AsyncStorage),
+    },
+  ),
+)
+```
+
+```tsx
+// App.tsx
+import React, { useEffect } from 'react'
+import { Button, Text, View } from 'react-native'
+import { useUserStore } from '@/store/userStore'
+
+export default function App() {
+  const { userInfo, token, setUserInfo, setToken, logout } = useUserStore()
+
+  // 模拟 App 启动后读取状态
+  useEffect(() => {
+    console.log('用户信息:', userInfo)
+    console.log('Token:', token)
+  }, [userInfo, token])
+
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text>
+        User Info:
+        {userInfo ? userInfo.username : '未登录'}
+      </Text>
+      <Text>
+        Token:
+        {token || '无'}
+      </Text>
+
+      <Button
+        title="登录"
+        onPress={() => {
+          setUserInfo({ userId: '1', username: '张三' })
+          setToken('abc123')
+        }}
+      />
+
+      <Button
+        title="退出登录"
+        onPress={() => {
+          logout()
+        }}
+      />
+    </View>
+  )
+}
+```
+
+
+
+
+
 ## 配置深度链接
 
 作用：通过链接就可以跳转到该app。