Native Base Toast - TypeError: TypeError: TypeError: null 不是对象(评估 'this.toastInstance._root.getModalState')
2018-12-11
4916
我正在使用 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>
);
}
}
3个回答
要吐司工作,您需要在
&lt; root&gt;
内包装最上方的组件。
958234166
Bill Zelenko
2019-09-05
您使用的是哪个版本的 NativeBase?似乎此错误可能已在较新版本中得到解决。请参阅 https://github.com/GeekyAnts/NativeBase/issues/1790
Niels Ladekarl
2018-12-11
只需将整个组件括在
<Root>
<Container>
<Header />
<Content padder>
<Button onPress={() => Toast.show({
text: 'Wrong password!',
buttonText: 'Okay'
})}>
<Text>Toast</Text>
</Button>
</Content>
</Container>
</Root>
中
Raul Camacho
2019-11-14