[英]Error component is not able to navigate in react native
我已将 ErrorComponent 放在 App.js 的顶部,但它无法导航到主屏幕。 有没有其他方法可以做到这一点? 任何指南将不胜感激。 我尝试了如何从 stack.navigation 外部的组件中使用 navigation.navigate ,但这在我的情况下似乎不起作用。
应用程序.js
export class App extends Component {
render() {
return (
<ErrorInterceptor>
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<StackNavigation />
</PersistGate>
</Provider>
</ErrorInterceptor>
);
}
}
ErrorInceptor.js
import React, {Component} from 'react';
import {Text, View, TouchableOpacity} from 'react-native';
export default class ErrorInterceptor extends Component {
state = {hasError: false};
static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI.
return {hasError: true};
}
componentDidCatch(error, errorInfo) {
// You can also log the error to an error reporting service
// logErrorToMyService(error, errorInfo);
}
changeState = () => {
// console.log('working');
this.setState({hasError: false});
this.props.navigation.navigate('Home');
};
render() {
if (this.state.hasError) {
// console.log(this.props);
// You can render any custom fallback UI
return (
<View>
<Text> Something Went Wrong..! </Text>
<TouchableOpacity
onPress={() => this.changeState()}
style={{width: '40%'}}>
<Text
style={{
backgroundColor: '#898989',
paddingVertical: 10,
borderRadius: 5,
color: 'white',
width: '100%',
textAlign: 'center',
}}>
Return to Home
</Text>
</TouchableOpacity>
</View>
);
}
return this.props.children;
}
}
这是因为您的错误边界超出了导航的 scope,这就是您无法使用导航道具在屏幕之间导航的原因。
由于 scope,来自反应导航的 withNavigation 在这里也不起作用。 我认为您唯一能做的就是在根组件上的组件安装上创建导航道具的引用,并将其设置在您的反应上下文或 redux 存储中,并将其用作访问错误边界 class 中的导航道具的参考。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.