Question

我正在从事本机响应，并使用AsyncStorage执行身份验证任务。但是，遇到以下错误：

路线“ Home”的组件必须是React组件。

到目前为止，我已经完成了以下工作：

import React, { Component } from 'react';
import { Platform,Text ,ActivityIndicator,
  AsyncStorage,
  StatusBar,
  StyleSheet,
  View,} from 'react-native';
import { createSwitchNavigator, createStackNavigator } from 'react-navigation';


const AppStack = createStackNavigator({
  Home: HomeScreen,
  Other: OtherScreen,
},
{
  initialRouteName: 'Home',
}
);
const AuthStack = createStackNavigator({
  SignIn: SignInScreen,
}
);

export default createSwitchNavigator({
  AuthLoading: AuthLoadingScreen,
  App: AppStack,
  Auth: AuthStack,
},
  {
    initialRouteName: 'AuthLoading',
  });


  class AuthLoadingScreen extends React.Component {
    constructor(props) {
      super(props);
      this._bootstrapAsync();
    }

    // Fetch the token from storage then navigate to our appropriate place
    _bootstrapAsync = async () => {
      const userToken = await AsyncStorage.getItem('userToken');

      // This will switch to the App screen or Auth screen and this loading
      // screen will be unmounted and thrown away.
      this.props.navigation.navigate(userToken ? 'App' : 'Auth');
    };

    // Render any loading content that you like here
    render() {
      return (
        <View style={styles.container}>
          <ActivityIndicator />
          <StatusBar barStyle="default" />
        </View>
      );
    }
  }


  class SignInScreen extends React.Component {
    static navigationOptions = {
      title: 'Please sign in',
    };

    render() {
      return (
        <View style={styles.container}>

          <Button title="Sign in!" onPress={this._signInAsync} />
        </View>
      );
    }

    _signInAsync = async () => {
      await AsyncStorage.setItem('userToken', 'abc');
      this.props.navigation.navigate('App');
    };
  }

class HomeScreen extends React.Component {
    static navigationOptions = {
      title: 'Welcome to the app!',
    };

    render() {
      return (
        <View style={styles.container}>
          <Button title="Show me more of the app" onPress={this._showMoreApp} />
          <Button title="Actually, sign me out :)" onPress={this._signOutAsync} />
        </View>
      );
    }

    _showMoreApp = () => {
      this.props.navigation.navigate('Other');
    };

    _signOutAsync = async () => {
      await AsyncStorage.clear();
      this.props.navigation.navigate('Auth');
    };
  }
  class OtherScreen extends React.Component {
    static navigationOptions = {
      title: 'Welcome to Other app!',
    };

    render() {
      return (
        <View style={styles.container}>
          <Button title="Show me more of the app" onPress={this._showMoreApp} />
          <Button title="Actually, sign me out :)" onPress={this._signOutAsync} />
        </View>
      );
    }
  }


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

如上面的代码所示，有两个stackNavigator和一个switchNavigator。任何人都可以指导我为什么会出现这样的错误？

路线“家”的组件必须是React组件

0 个答案: