0

我正在尝试在我的 Backend 类的本机屏幕之间导航，如下所示：

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

我的后端类不是一个组件，因此没有导入到我正在使用的堆栈导航器中。我收到一条错误消息，提示“self.props.navigation 不是对象”。

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

4

3 回答 3

1

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

const MyNavigator = StackNavigator(...);

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

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

import MyApp from '...';
MyApp.Navigator.dispatch(NavigationActions.back());
于 2017-08-31T13:52:36.130 回答
0

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

这个想法是你创建一个服务来保存你的导航器的引用。现在，您可以从应用程序的任何位置导入该服务并访问您的导航器。它保持简洁明了。

于 2017-08-31T14:23:36.473 回答
0

如果您使用的是 react-navigation，那么您可以通过 Navigation Service 实现此目的

创建一个名为 NavigationService 的文件并在其中添加以下代码

      import { NavigationActions, StackActions } from 'react-navigation';

  let navigator;

  function setTopLevelNavigator(navigatorRef) {
    navigator = navigatorRef;
  }

  function navigate(routeName, params) {
    navigator.dispatch(
      NavigationActions.navigate({
        routeName,
        params
      })
    );
  }

  function goBack(routeName, params) {
    navigator.dispatch(
      StackActions.reset({
        index: 0,
        actions: [
          NavigationActions.navigate({
            routeName,
            params
          })
        ]
      })
    );
  }

  function replace(routeName, params) {
    navigator.dispatch(
      StackActions.replace({
        index: 0,
        actions: [
          NavigationActions.navigate({
            routeName,
            params
          })
        ]
      })
    );
  }

  function pop() {
    navigator.dispatch(StackActions.pop());
  }

  function popToTop() {
    navigator.dispatch(StackActions.popToTop());
  }

  // add other navigation functions that you need and export them

  export default {
    navigate,
    goBack,
    replace,
    pop,
    popToTop,
    setTopLevelNavigator
  };

现在在你的 app.js 中导入这个文件并设置 TopLevelNavigator，你的 app.js 看起来像这样

    import React, { Component } from 'react';
    import NavigationService from './routes/NavigationService';

    export default class App extends Component {
    constructor() {
        super();
    }

    render() {
        return (
            <View style={{ flex: 1, backgroundColor: '#fff' }}>
            <AppNavigator
                ref={navigatorRef => {
                NavigationService.setTopLevelNavigator(navigatorRef);
                }}
            />
            </View>
        );
    }
   }

现在你可以开始了，你可以在任何你想要的地方导入你的 NavigationService，你可以像这样在任何组件和非组件文件中使用它

import NavigationService from 'path to the NavigationService file';

/* you can use any screen name you have defined in your StackNavigators
 * just replace the LogInScreen with your screen name and it will work like a  
 * charm
 */
NavigationService.navigate('LogInScreen'); 


/*  
 * you can also pass params or extra data into the ongoing screen like this
 */
NavigationService.navigate('LogInScreen',{
  orderId: this.state.data.orderId
});
于 2019-01-08T13:37:47.390 回答