Native Base Toast - TypeError：TypeError：TypeError：null不是对象（评估'this.toastInstance._root.getModalState'）

Question

我正在使用 react native 来构建移动应用程序。我正面临 Nativ Base Toast 问题。当我第一次加载应用程序然后导航到工单状态时，如果我返回带有 android 后退按钮的主页，则会弹出错误消息。

下面是我的代码和错误截图。

注意 - 并非每次都会出现此错误。

任何帮助将不胜感激。

提前致谢

Home.js 代码（在应用程序加载时呈现）

  

    import React, { Component } from 'react';
    import { createDrawerNavigator , tabBarOptions, StackNavigator} from 'react-navigation';
    import Header from './Header';
    import Request from './Request';
    import Navigation from './Navigation';
    import TicketStatus from './TicketStatus/TicketStatus';

    const RootStack = StackNavigator(
        {
            Home: {     screen: Request },
            Navigation: { screen: Navigation },
            TicketStatus: { screen: TicketStatus },
        },
        {
            headerMode: 'none',
            navigationOptions: {
                headerVisible: false,
            }
        }
    );
    RootStack.navigationOptions = {
        header: null
    }
    export default RootStack;

TicketStatus.js 代码

export default  class TicketStatus extends Component {
    constructor(props){
        super(props)
        this.state = {
            allTickets : [{ name:'Jones Residence', number: '12343534325', classs:'active'},{name:'Rex Bell Elementary', number: '12343534325', classs:'pending' },{name:'CitiBank Offic', number: '123435', classs:'expired' }]
        };
    }
    _fetchTickets(token)
    {
        if(this.mounted) {
            this.setState({
                isloading: true                     
            });
        }
        fetch(config.BASE_URL+'alltickets?api_token='+token,{
            method: 'GET',
            headers: {
                    'Authorization': 'Bearer ' + token,
            }               
        })
        .then((response) => response.json())
        .then((res) => {
            if(this.mounted) {
                if(res.status == 1)
                {
                    this.setState({
                        allTickets: res.data,
                    });                 
                }
                else if(res.status == 0)
                {
                    Toast.show({
                        text: res.message,
                        buttonText: "Okay",
                        duration: 5000,
                        type: "danger"
                    })
                }
                this.setState({
                    isloading: false,
                });
            }
        }).catch(err => {
            if(this.mounted) {
                Toast.show({
                    text: err,
                    buttonText: "Okay",
                    duration: 5000,
                    type: "danger"
                })
            }
        }).done();
    }
    componentDidMount(){
        this.mounted = true;
        this._fetchTickets(config.token);   
    }
    componentWillUnmount(){
        this.mounted = false;
        Toast.hide();
        Toast.toastInstance = null;
    }
    renderTickets = () => {
        return (
            <Content style={{height:300, backgroundColor:"#FFBC42", borderRadius:10}}>
            <ScrollView>
                {
                    this.state.allTickets.map((option, i) => {
                        return (
                            <TouchableOpacity key={i} >
                                <View>
                                    <Text>{option.number} / {option.name}</Text>
                                </View>
                            </TouchableOpacity>
                        )
                    })
                }                   
            </ScrollView>
            </Content>
        )
    }
    render() {
        return (
            <Root>
            <Container>
                <Header {...this.props}/>
                <ScrollView>
                <Content padder>
                    <H1 style={styless.ticket_req}>Check the Status of a Ticket</H1>                                            
                    {this.renderTickets()}  
                </Content>
                </ScrollView>
                {this.state.isloading && (
                        <Loader />
                    )}
            </Container>    
            </Root>
        );
    }
}

Answer 1

我今天遇到了同样的错误，我是这样解决的。

1. 首先确保您已将您的 App Root（也就是您的最终 UI 组件）包装在 NativeBase 的 Root 组件中，如下所示：

   import 'react-native-gesture-handler';
    import React from 'react';
    import { AppNavigator } from './navigation.component';
    import { Root } from "native-base";
   
    //AppNavigator: https://reactnavigation.org/docs/2.x/app-containers/
    //You can replace it with the <Something/> below #3, depending on your project
    export default () => (
        <Root>
            <AppNavigator/>
        </Root>
    );
   

如果您正在使用其他库，例如 UIKitten 要求成为 root。如下图所示：

import 'react-native-gesture-handler';
    import React from 'react';
    import {
      ApplicationProvider,
      IconRegistry,
    } from '@ui-kitten/components';
    import { EvaIconsPack } from '@ui-kitten/eva-icons';
    import * as eva from '@eva-design/eva';
    import { AppNavigator } from './navigation.component';
    import { Root } from "native-base";
    
    export default () => (
        <React.Fragment>
            <IconRegistry icons={EvaIconsPack}/>
            <ApplicationProvider {...eva} theme={eva.light}>
                <Root>
                    <AppNavigator/>
                </Root>
            </ApplicationProvider>
      </React.Fragment>
    );

1. 其次，创建一个函数，并将其放入一个文件，例如MyOwnToast.js，如下图：（文件名：MyOwnToast.js）。

    
    import {Toast as ToastNB} from 'native-base';

    class Toast extends ToastNB {}

    export default Toast;

1. 在要渲染和显示 toast 的文件中。执行以下操作

import React from 'react';
    import { View, Button } from 'react-native';
    import {Toast} from './MyOwnToast.js';
    
    class Something extends React.Component{
        constructor(){
            super();
        }
    
        openTheToast = ()=>{
            Toast.show({
              text: 'Voila! Here is the toast.',
              buttonText: 'Okay',
              duration: 3000,
              position: 'top',
              type: 'success',
            });
        }
    
        render(){
            return(<View>
                
                <Toast
                    ref={(c) => {
                        if (c) Toast.toastInstance = c;
                    }}
                />
    
                <Button onPress={()=>this.openTheToast()}> Open The Toast </Button>
            </View>)
        }
    };
    
    export default Something;

这些步骤应该可以为您解决。

Answer 2

在功能组件中

import { Root } from 'native-base';

然后

return(
<Root>
...
 {renderToast}
</Root>
)

Answer 3

对此有一个临时修复。

将 package.json 中的 native-base 替换为：

 "native-base": "https://github.com/dansokol/NativeBase.git",

来自https://github.com/GeekyAnts/NativeBase/issues/3109

Answer 4

只需要将整个组件包含在

中

        <Root>
             <Container>
            <Header />
            <Content padder>
                <Button onPress={() => Toast.show({
                    text: 'Wrong password!',
                    buttonText: 'Okay'
                })}>
                    <Text>Toast</Text>
                </Button>
            </Content>
        </Container>
        </Root>

Answer 5

要让 Toast 正常工作，您需要将最顶层的组件包装在来自 native-base 的 <Root> 中。

<Root>
    <AppNavigator />
</Root>

Answer 6

您使用的是哪个版本的 NativeBase？似乎此错误可能已在较新版本中得到解决。见https://github.com/GeekyAnts/NativeBase/issues/1790