React Native启动时toast.show()函数失效问题求助

问题详情 #

在React Native项目中使用react-native-toast-notifications库，已用ToastProvider包裹路由组件，但在启动页（SplashScreen）调用useToast()钩子后，发送服务器Ping请求并收到响应时出现如下错误：

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

尝试设置延迟等待toast初始化但无效，需要排查问题原因。

相关代码 #

路由组件代码 #

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>
    )
}

启动页代码 #

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>
    )
}

排查与解决思路 #

• 调整ToastProvider层级：当前ToastProvider包裹了MenuProvider，可能导致上下文传递异常。尝试将ToastProvider移至NavigationContainer的直接外层，确保页面组件能正确获取到Toast上下文：

export const Routing = () => {
    return (
        <MenuProvider>
            <ToastProvider>
                <NavigationContainer theme={navigationContainerTheme}>
                    {/* 原有栈内容 */}
                </NavigationContainer>
            </ToastProvider>
        </MenuProvider>
    )
}

• 确保useToast调用时机正确：添加对toast实例的判断，避免在上下文未初始化时调用方法。同时用useCallback包裹异步函数，将toast加入依赖数组：

import { useCallback } from 'react'

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

    const showSplashScreen = useCallback(async () => {
        if (!toast) return
        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!')
        }
    }, [toast, navigation])

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

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

• 验证库兼容性与依赖：检查react-native-toast-notifications版本是否与当前React Native版本匹配，尝试重新安装依赖：

npm uninstall react-native-toast-notifications
npm install react-native-toast-notifications

• 排查上下文冲突：确认项目中没有重复注册ToastProvider，也没有其他第三方库的上下文与Toast上下文产生冲突。

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