Question

我正在尝试反应导航。我想从login屏幕导航到Home屏幕。当我在StackNavigator中声明LoginScreen时，我收到了上述错误。以下是我的代码。

更新：

Route.js

import React, {Component} from 'react';
import { StackNavigator, DrawerNavigator } from 'react-navigation';
import Profile from './Profile';
import CourseListing from './CourseListing';
import Faq from './Faq';
import HomeScreen from './HomeScreen';
import CategoryDetail from './CategoryDetail';
import LoginForm from './LoginForm';
import RegisterForm from './RegisterForm';
import DetailedView from './DetailedView';
import IndividualSection from './IndividualSection';

const StackScreens = StackNavigator({
    LoginForm:{screen: LoginForm},
    RegisterForm: {screen: RegisterForm},
    CourseListing:{screen: CourseListing},
    Home: {screen: HomeScreen},
    CategoryDetail: {screen: CategoryDetail},
    DetailedView: {screen: DetailedView},
    IndividualSection: {screen: IndividualSection}
})

export const MyDrawer = DrawerNavigator({
   Home: {
     screen: StackScreens,
  },
  Profile: {
      screen: Profile
  },
  FAQ: {
      screen: Faq
  }
});

我将在MyHome.js内导入此内容

import { MyDrawer} from 'LMS/src/components/Router';
class MyHome extends Component {


    render(){
        return(

        <MyDrawer />
        );
    }

}
export default MyHome;

也在App.js（主页）

之内

return (

    <View style={{flex: 1}}>
    <MyHome />
    </View>

    );

不知道我在做什么。请帮助。点击LoginForm

中的登录按钮后

class LoginForm extends Component {
render(){
return(

<TouchableOpacity style={styles.button} onPress={() => this.props.navigation.navigate("Home")}>
                                <Text style={{paddingLeft:50}}>Login</Text>
                                </TouchableOpacity>
);
}
export default LoginForm;

Answer 1

您的路线名称主页，如您在 Route.js

中定义的那样

onPress={() => this.props.navigation.navigate("Home")}>

并在 Route.js 中定义 LoginForm 屏幕，如下所示： -

    export const MyDrawer = DrawerNavigator({

     LoginForm: {
      screen :LoginForm
      },
      Home: {
         screen: StackScreens,
      },
      Profile: {
          screen: Profile
      },
      FAQ: {
          screen: Faq
      },
    });

Answer 2

路线名称为Home not HomeScreen。

只需按如下方式定义onPress即可。

onPress={() => this.props.navigation.navigate("Home")}>

同时检查您的LoginForm导入。您可能已将其导入为

import LoginForm from './LoginForm';

但您可能没有正确导出默认值。

正确的做法是：

export default class LoginForm

反应原生导航错误：路线登录应声明屏幕

2 个答案: