Реагировать с навигацией - undefined не является объектом (оценивается как this.navigation.navigate) - PullRequest
Новая
       3

Реагировать с навигацией - undefined не является объектом (оценивается как this.navigation.navigate)

0 голосов
/ 13 января 2020

Я следую этому руководству по реализации навигатора коммутатора для аутентификации пользователя: https://snack.expo.io/@react-navigation / auth-flow-v3 .

Однако this.navigation.navigate, по-видимому, не определено, когда Я пытаюсь перейти к следующему экрану. 

undefined is not an object (evaluating 'this.props.navigation.navigate')

Я использую expo для своего приложения, и я уже посмотрел на решения, опубликованные для аналогичного вопроса на React Native - проблема навигации " undefined не является объектом (this.props.navigation.navigate) " безрезультатно. 

import * as React from 'react';
import { createBottomTabNavigator } from 'react-navigation-tabs';

import profile from './app/screens/profile.js'
import home from './app/screens/home.js'
import createCompetition from './app/screens/create.js'
import explore from './app/screens/explore.js'
import Icon from 'react-native-vector-icons/MaterialIcons'
import login from './app/screens/login.js';
import { f } from './config/config.js';
import { ActivityIndicator, AsyncStorage, Button, StatusBar, StyleSheet, View } from 'react-native';
import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
/** 
 * Tab Stack is the Bottom Navigator for the different pages
*/
const TabStack = createBottomTabNavigator(
  {
    Home: {
      screen: home,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
          <Icon name="home" size={25} style={{ color: tintColor }} />
        ),

      },
    },
    Explore: {
      screen: explore,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
          <Icon name="search" size={25} style={{ color: tintColor }} />
        ),

      }
    },
    Profile: {
      screen: profile,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
          <Icon name="person" size={25} style={{ color: tintColor }} />
        ),

      }
    },
    Create: {
      screen: createCompetition,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
          <Icon name="add" size={25} style={{ color: tintColor }} />
        ),

      }
    },
  },
  {
    tabBarOptions: {
      showIcon: true,
      showLabel: false,
      activeTintColor: 'black',

      style: { backgroundColor: 'white', }
    },

  },
)

/**
 * Loading Screen during authorization process
 */
class AuthLoadingScreen extends React.Component {
  constructor() {
    super();
    this._bootstrapAsync();
  }

  // Fetch the token from storage then navigate to our appropriate place
  _bootstrapAsync = async () => {
    f.auth().onAuthStateChanged(function (user) { //checks if user is signed in or out
      this.props.navigation.navigate(user ? 'App' : 'Auth');
    })
  };

  // Render any loading content that you like here
  render() {
    return (
      <View style={styles.container}>
        <ActivityIndicator />
        <StatusBar barStyle="default" />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

const AppStack = createStackNavigator({ Home: TabStack });
const AuthStack = createStackNavigator({ Login: login });
const RootStack = createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
);

const App = createAppContainer(RootStack);
export default App;

Ответы [ 2 ]

1 голос
/ 13 января 2020

Вы не предоставляете доступ к this вашей функции _bootstrapAsync и вашему onAuthStateChanged обратному вызову. Просто передайте обратный вызов внутри него, используя функцию стрелки, так как она автоматически привязывает текущую функцию к текущему приложению this

_bootstrapAsync = async () => {
   f.auth().onAuthStateChanged((user) => { //checks if user is signed in or out
   this.props.navigation.navigate(user ? 'App' : 'Auth');
   })
};
0 голосов
/ 13 января 2020

Проблема связана с ключевым словом функции, которое не связывает ключевое слово this. Лучше заменить его на функции стрелок ES6, которые косвенно связывают это с внутренней областью действия: 

f.auth().onAuthStateChanged((user) => { //checks if user is signed in or out
   this.props.navigation.navigate(user ? 'App' : 'Auth');
   })

Надеюсь, это поможет. Не стесняйтесь сомнений

...