React Native使用Native Base Toast时出现Cannot Read Properties of Undefined报错求助

核心原因 #

报错本质是Native Base的Toast实例未正确获取，或页面跳转导致组件卸载后，Toast仍在尝试执行，进而引发实例丢失的问题。

解决方法 #

1. 确保应用被Root组件包裹 #

Native Base的Toast依赖Root组件提供的上下文，必须在入口文件（如App.js）中用Root包裹整个应用：

// App.js
import { Root } from 'native-base';
import MainNavigator from './MainNavigator';

export default function App() {
  return (
    <Root>
      <MainNavigator />
    </Root>
  );
}

2. 防止组件卸载后调用Toast #

页面跳转时组件会卸载，若此时Toast仍在异步执行，会导致实例丢失。可通过挂载状态判断避免：

import { useRef, useEffect } from 'react';
import { Toast } from 'native-base';

export default function YourComponent() {
  const isMounted = useRef(true);

  useEffect(() => {
    return () => {
      isMounted.current = false;
    };
  }, []);

  const showToast = (message, duration = 2500) => {
    if (!isMounted.current) return;
    Toast.show({
      text: message,
      duration,
      position: 'bottom',
      textStyle: { textAlign: 'center', fontSize: moderatescale(12), fontWeight: 'bold' },
      style: { backgroundColor: 'black', borderRadius: moderatescale(40), marginHorizontal: moderatescale(20), marginBottom: moderatescale(55) }
    });
  };

  // 调用示例
  const handleNoWorkorders = () => {
    showToast("No Workorders found for this Asset");
  };

  // ...其他组件代码
}

3. 改用Native Base的useToast钩子（推荐） #

若你的Native Base版本≥3.x，官方推荐使用useToast钩子替代传统Toast，无需依赖Root，稳定性更高：

import { useToast } from 'native-base';

export default function YourComponent() {
  const toast = useToast();

  const showToast = (message, duration = 2500) => {
    toast.show({
      description: message,
      duration,
      placement: 'bottom',
      bgColor: 'black',
      _text: {
        fontSize: moderatescale(12),
        fontWeight: 'bold',
        textAlign: 'center'
      },
      containerStyle: {
        borderRadius: moderatescale(40),
        marginHorizontal: moderatescale(20),
        marginBottom: moderatescale(55)
      }
    });
  };

  // 调用示例
  showToast("No Workorders found for this Asset");
}

替代方案：使用react-native-toast-message #

如果Native Base的Toast问题反复出现，可改用独立的react-native-toast-message库，轻量且无上下文依赖：

1. 安装依赖：

npm install react-native-toast-message
# 或
yarn add react-native-toast-message

2. 在入口文件注册：

// App.js
import Toast from 'react-native-toast-message';

export default function App() {
  return (
    <>
      <MainNavigator />
      <Toast />
    </>
  );
}

3. 调用示例：

import Toast from 'react-native-toast-message';

const showToast = (message, duration = 2500) => {
  Toast.show({
    type: 'info',
    text1: message,
    position: 'bottom',
    textStyle: { textAlign: 'center', fontSize: moderatescale(12), fontWeight: 'bold' },
    style: { backgroundColor: 'black', borderRadius: moderatescale(40), marginHorizontal: moderatescale(20), marginBottom: moderatescale(55) },
    visibilityTime: duration
  });
};

// 调用
showToast("No Workorders found for this Asset");

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