react-native在非组件类的屏幕之间导航

I'm trying to navigate between react native screens from my Backend class like this:

我正试图在我的Backend类中反应原生屏幕之间导航，如下所示：

var self = this;
firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    self.setState({
      userID: user.uid,
    })
  } else{
      self.props.navigation.navigate("Login");
      }
});

My backend class is not a component and therefore is not imported into the stack navigator I am using. I am getting an error saying 'self.props.navigation is not an object'.

我的后端类不是组件，因此不会导入到我正在使用的堆栈导航器中。我收到一条错误，说'self.props.navigation不是一个对象'。

Does anyone know I can fix this? Thanks

有谁知道我可以解决这个问题？谢谢

2 个解决方案

#1

One not-so-good practice is to define your Navigator as a static/class variable of your App instance:

一个不太好的做法是将Navigator定义为App实例的静态/类变量：

const MyNavigator = StackNavigator(...);

export default class MyApp extends Component {
    render() {
        return <MyNavigator ref={(ref) => MyApp.Navigator = ref}/>
    }
}

then you can access your navigator and it's props and functions anywhere you want! (for example dispatch a back event):

然后你可以访问你的导航器，它的道具和功能你想要的任何地方！（例如派遣一个回事件）：

import MyApp from '...';
MyApp.Navigator.dispatch(NavigationActions.back());

#2

I am personally not a fan of navigation actions happening at that level however, sometimes it's necessary. Expanding on the answer from @Dusk a pattern was made known to me that helps with this very solution. You can find it here
https://github.com/react-community/react-navigation/issues/1439#issuecomment-303661539

我个人并不喜欢在那个级别发生的导航行为，但有时候这是必要的。扩展了@Dusk的答案，我知道了一个模式，它有助于解决这个问题。你可以在这里找到它https://github.com/react-community/react-navigation/issues/1439#issuecomment-303661539

The idea is that you create a service that holds a ref to your navigator. Now from anywhere in your app you can import that service and have access to your navigator. It keeps it clean and concise.

我们的想法是创建一个包含引导程序引用的服务。现在，您可以从应用程序的任何位置导入该服务并访问导航器。它保持清洁和简洁。

#1