如何使用react-navigation传递带有身份验证流程的props(即screenProps)

时间:2019-01-16 06:29:01

标签: react-native navigation react-navigation

我想将this.props传递给app.js的屏幕组件,下面是我的代码。

我尝试做同样的事情,但是当我将它作为screenProp传递时,它在屏幕组件中显示为未定义。

App.js
import { createAppContainer, createSwitchNavigator, createStackNavigator } from 'react-navigation';
import HomeScreen from './HomeScreen';
import MapScreen from './MapScreen';
import LoginScreen from './LoginScreen';
import RegisterDeviceScreen from './RegisterDeviceScreen';
import React, { Component } from 'react';
import {
  AsyncStorage,
} from 'react-native';

class AuthLoadingScreen extends Component {
  componentDidMount() {
    this._bootstrapAsync();
  }

  _bootstrapAsync = async () => {
    const userToken = await AsyncStorage.getItem('sessionText');
    if (!userToken) {
      await AsyncStorage.clear();
    }
    await this.props.navigation.navigate(userToken ? 'App' : 'Auth');
  };

  render() {
    return <RegisterDeviceScreen screenProps={this.props} />;
  }
}

const AppStack = createStackNavigator(
  {
    HomeScreen: { screen: HomeScreen },
    MapScreen: { screen: MapScreen },
    LoginScreen: { screen: LoginScreen },
    RegisterDeviceScreen: { screen: RegisterDeviceScreen },
  },
  {
    navigationOptions: {
      gesturesEnabled: false,
    }
  });

const AuthStack = createStackNavigator(
  {
    LoginScreen: { screen: LoginScreen },
    RegisterDeviceScreen: { screen: RegisterDeviceScreen },
    HomeScreen: { screen: HomeScreen },
    MapScreen: { screen: MapScreen },
  },
  {
    navigationOptions: {
      gesturesEnabled: false,
    }
  });

const SwitchNavigator = createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    Auth: AuthStack,
    App: AppStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
);

const AppContainer = createAppContainer(SwitchNavigator);
export default AppContainer;

当我尝试将其登录到主屏幕组件内的componentdidmount()时,它显示screenProp为未定义。

0 个答案:

没有答案