Only one API call when app just started

src/Index.tsx

@@ -3,7 +3,7 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
 import { NavigationContainer } from '@react-navigation/native'
 import { enableScreens } from 'react-native-screens'
 
-import React from 'react'
+import React, { useEffect } from 'react'
 import { StatusBar } from 'react-native'
 import Toast from 'react-native-toast-message'
 import { Feather } from '@expo/vector-icons'
@@ -16,7 +16,7 @@ import ScreenMe from '@screens/Me'
 import { themes } from '@utils/styles/themes'
 import { useTheme } from '@utils/styles/ThemeManager'
 import getCurrentTab from '@utils/getCurrentTab'
-import { toastConfig } from '@components/toast'
+import { toast, toastConfig } from '@components/toast'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { getLocalUrl } from './utils/slices/instancesSlice'
@@ -32,7 +32,11 @@ export type RootStackParamList = {
   'Screen-Me': undefined
 }
 
-export const Index: React.FC = () => {
+export interface Props {
+  localCorrupt: boolean
+}
+
+export const Index: React.FC<Props> = ({ localCorrupt }) => {
   const localInstance = useSelector(getLocalUrl)
   const { i18n } = useTranslation()
   const { mode, theme } = useTheme()
@@ -41,6 +45,18 @@ export const Index: React.FC = () => {
     dark = 'light-content'
   }
 
+  useEffect(() => {
+    const showLocalCorrect = localCorrupt
+      ? toast({
+          type: 'error',
+          content: '登录已过期',
+          description: '请重新登录',
+          autoHide: false
+        })
+      : undefined
+    return showLocalCorrect
+  }, [localCorrupt])
+
   return (
     <>
       <StatusBar barStyle={barStyle[mode]} />

src/components/toast.tsx

@@ -63,13 +63,21 @@ const ToastBase = ({ config }: { config: Config }) => {
     >
       <View style={styles.container}>
         <Feather
+          // @ts-ignore
           name={iconSet[config.type]}
           color={theme[config.type]}
           size={StyleConstants.Font.Size.M + 2}
         />
-        <Text style={[styles.text, { color: theme.primary }]}>
-          {config.text1}
-        </Text>
+        <View style={styles.texts}>
+          <Text style={[styles.text1, { color: theme.primary }]}>
+            {config.text1}
+          </Text>
+          {config.text2 && (
+            <Text style={[styles.text2, { color: theme.secondary }]}>
+              {config.text2}
+            </Text>
+          )}
+        </View>
       </View>
     </SafeAreaView>
   )
@@ -91,11 +99,18 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'center',
+    alignItems: 'center',
     padding: StyleConstants.Spacing.M
   },
-  text: {
-    fontSize: StyleConstants.Font.Size.M,
+  texts: {
     marginLeft: StyleConstants.Spacing.S
+  },
+  text1: {
+    fontSize: StyleConstants.Font.Size.M
+  },
+  text2: {
+    fontSize: StyleConstants.Font.Size.S,
+    marginTop: StyleConstants.Spacing.S
   }
 })