如何修复NativeBase Toast报错：undefined is not an object (evaluating 'this.toastInstance._root')

这个错误通常是因为没有在组件树中正确注册Toast实例，或者组件没有在NativeBase的上下文环境中运行导致的。针对你的场景，我整理了具体的修复步骤：

1. 确保组件包裹在NativeBase的<Container>中 #

NativeBase的大部分组件（包括Toast）依赖于<Container>提供的上下文，所以你的组件需要放在<Container>内部：

import React, { Component } from 'react';
import { Container, Button, Toast } from 'native-base';

class YourComponent extends Component {
  // ...你的其他代码
  render() {
    return (
      <Container>
        {/* 你的其他UI元素，比如触发assignTicket的按钮 */}
        <Button onPress={() => this.assignTicket(123)}>Assign Ticket</Button>
        {/* 必须添加Toast组件，用于注册实例 */}
        <Toast ref={ref => this.toastInstance = ref} />
      </Container>
    );
  }
}

2. 正确绑定组件方法的this #

如果你的assignTicket方法是普通函数定义，需要确保this指向正确，避免因上下文丢失导致的异常：

方式一：构造函数绑定 #

constructor(props) {
  super(props);
  // 绑定assignTicket方法的this到组件实例
  this.assignTicket = this.assignTicket.bind(this);
}

assignTicket(id) {
  Toast.show({
    text: "Wrong password!",
    buttonText: "Okay",
    duration: 3000,
    type: "success"
  });
}

方式二：箭头函数定义方法 #

直接用箭头函数定义方法，自动绑定组件实例的this：

assignTicket = (id) => {
  Toast.show({
    text: "Wrong password!",
    buttonText: "Okay",
    duration: 3000,
    type: "success"
  });
}

3. 确认Toast调用参数的正确性 #

你的参数配置是符合NativeBase v2要求的，这里再补充下参数说明供你参考：

• type可选值为"success"、"warning"、"danger"、"info"
• duration可设为具体毫秒数（如3000）或null（一直显示直到点击按钮）

错误原因说明 #

NativeBase v2的Toast需要依赖在组件树中渲染的<Toast>实例来创建提示弹窗，如果你没有添加这个组件，Toast.show()就找不到对应的toastInstance，从而抛出undefined is not an object的错误。

按照上面的步骤调整后，你的Toast应该就能正常显示了。

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