应用启动时toast.show()函数不起作用

Question

当我在 React Native 项目中使用

react-native-toast-notifications

时，我在闪屏中使用了

useToast()

。

我已经使用

ToastProvider

包装了闪屏组件

就是这里

import { DefaultTheme, NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { SplashScreen } from '@pages/auth/splash'
import { SignIn } from '@pages/auth/login'
import { ToastProvider } from 'react-native-toast-notifications'

const RootStack = createNativeStackNavigator()
const navigationContainerTheme = DefaultTheme
navigationContainerTheme.colors.background = color.appBackgroudColor

export const Routing = () => {
    return (
        <ToastProvider>
            <MenuProvider>
                <NavigationContainer theme={navigationContainerTheme}>
                    <RootStack.Navigator
                        initialRouteName={Routes.SPLASH}
                        screenOptions={{ animation: 'none' }}
                    >
                        <RootStack.Screen
                            name={Routes.SIGN_IN}
                            component={SignIn}
                            options={{
                                headerShown: false,
                            }}
                        />
                    </RootStack.Navigator>
                </NavigationContainer>
            </MenuProvider>
        </ToastProvider>
    )
}

这是我的splashscreen.ts 文件

import React, { useEffect } from 'react'
import {
    ScrollView,
    StyleSheet,
    useColorScheme,
    View,
    TouchableOpacity,
} from 'react-native'
import { SplashScreenProps } from '@app/types'
import { Routes } from '@shared/config/routes'
import { sendPing } from '@shared/api/defaultApi'
import { useToast } from 'react-native-toast-notifications'

export const SplashScreen = ({ navigation }: SplashScreenProps) => {
    const css = styleInit(useColorScheme() === 'dark')
    const toast = useToast()

    useEffect(() => {
        showSplashScreen()
    }, [navigation])

    const showSplashScreen = async () => {
        const pingResponse = await sendPing()
        if (pingResponse) {
            toast.show('Success to connect server!')
            navigation.navigate(Routes.AUTHORIZE)
        } else {
            toast.show('Failed to connect server!')
            console.log('Ping server failed!')
        }
    }

    return (
        <View>
            <Text>Splashscreen</Text>
        </View>
    )
}

如果我启动应用程序，它会向服务器发送 ping 并获取响应。 当我收到回复后，出现了这个错误

Possible unhandled promise rejection (id: 0: TypeError: toast.show is not a function (it is undefined)
...

我不知道原因是什么，也许使用 useToast() 钩子初始化 toast 有延迟？ 如果有人能帮助我解决这个问题，我将不胜感激。 谢谢。

我尝试设置超时直到吐司初始化，但效果不佳。

Answer 1

从react-native-toast-notifications GitHub问题来看，这可能是由最近的一个错误引起的，其中尝试在应用程序渲染之前加载

toast

。

有人创建了

ToastProvider

组件的覆盖，如果您使用它而不是导入的

ToastProvider

，可能会为您解决问题。

export const ToastProvider: FC<PropsWithChildren> = ({children}) => {
  const toastRef = useRef(null);
  const [refState, setRefState] = useState(null);

  useEffect(() => {
    setRefState(toastRef.current as any);
    GlobalToast = toastRef.current as any;
  }, []);

  return (
    <ToastContext.Provider value={refState as any}>
      <Toast` ref={toastRef} />
      {refState && children}
    </ToastContext.Provider>
  );
};