反应本机导航错误。"主"应声明一个屏幕

Question

我目前正在使用 React Native 和新的 React Navigation。 但是有一个错误： 当前在一个屏幕中出现错误。

导航如下

MainScreen->Login takes to Splash Screen
Splash -> click on a button takes to Home Screen
HomeScreen->Logout Should take to Main Screen

主屏幕到主屏幕工作正常，但主屏幕到主屏幕不起作用。

下面是即将出现的错误

"主"应声明一个屏幕

//Code for the Main screen

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity,
Image,
Alert
} from 'react-native';
import Splash from './Splash';
import Signin from './signin';
import Forget from './forget';
import { StackNavigator } from 'react-navigation';
class Main extends Component {
constructor(props) {
super(props)
this.state = {
txt_input_email: '',
txt_input_password: '',
};
}

//=======navigation optionpane========//
static navigationOptions = {
title: 'Welcome',
header: null
};
//====================================//
//==========================function to validate user information=========================================//
mvalidate(){ 
const { navigate } = this.props.navigation;
if (this.state.txt_input_email==""){
Alert.alert("Please enter email");
return;
}
if(this.state.txt_input_password==""){
Alert.alert("Please enter Password");
return;
}
if(!this.validateEmail(this.state.txt_input_email || 
!this.vlidatePassword(this.state.txt_input_password))){
Alert.alert("Email/Password is invalid/Wrong");
}else{
if(this.state.txt_input_email=="[e-mail]" && this.state.txt_input_password=="abc123"){
navigate('SplashPage')
}else{
Alert.alert('Wrong username/password');
}
} 
}
validateEmail(email) {
if(/^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/){
return true;
}else{
return false;
} 
}
vlidatePassword(password){
if(/^[a-zA-Z0-9]{4,100}$/){
return true;
}else{
false;
}
}

//=========================================================================================================//

render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<Image source={require('../images/logo.jpg')} style={styles.image}></Image>
<Text style={styles.text}> Sign In</Text>
<View style={styles.set}>
<View style={styles.imageset}>
<Image source={require('../images/facebook-logo.png')} style={styles.facebook}></Image>
<Image source={require('../images/google-plus.png')} style={styles.google}></Image>

</View>
<View style={[styles.inputWrap, styles.set]}>
<TextInput
placeholder="Email/Employee Id"
style={styles.input}
underlineColorAndroid="transparent"
onChangeText={value => this.setState({txt_input_email: value.trim()})}
/>
</View>
<View style={styles.inputWrap}>
<TextInput
placeholder="Password"
secureTextEntry
style={styles.input}
underlineColorAndroid="transparent"
onChangeText={value => this.setState({txt_input_password: value.trim()})}
/>
</View>
<View style={styles.imageset}>
<TouchableOpacity activeOpacity={.5} onPress={() => navigate('ForgetPage')}>
<View>
<Text style={styles.forget}>Forget Password ?</Text>
</View>
</TouchableOpacity>
<TouchableOpacity activeOpacity={.5} onPress={()=>this.mvalidate()} >
<View style={styles.button}>
<Text style={styles.buttonText}> SIGN IN</Text>
</View>
</TouchableOpacity>
</View>
<View style={styles.imageset}>
<Text style={styles.user}>New User ?  </Text>
<TouchableOpacity activeOpacity={.5} onPress={() => navigate('SigninPage')} >
<View>
<Text style={styles.signup}>Sign Up</Text>
</View>
</TouchableOpacity>
</View>

</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#000000'
},
inputWrap: {
flexDirection: "row",
marginVertical: 10,
height: 40,
width: 300,
marginHorizontal: 20,
backgroundColor: "#FF0000"
},
text: {
color: "#FFF",
fontSize: 25
},
input: {
flex: 1,
paddingHorizontal: 15,
backgroundColor: '#fff'
},
button: {
backgroundColor: "#FF8C00",
paddingVertical: 15,
marginVertical: 15,
marginLeft: 45,
width: 100,
height: 35,
alignItems: "center",
justifyContent: "center"
},
buttonText: {
color: '#FFF',
fontSize: 15
},
forget: {
color: "#11D923",
backgroundColor: "transparent",
fontSize: 18,
marginHorizontal: 15,
marginTop: 20,
},
signup: {
color: "#11D923",
backgroundColor: "transparent",
fontSize: 18,
marginLeft: 25,
marginTop: 15
},
image: {
width: 250,
height: 110
},
set: {
marginTop: 20
},
imageset: {
flexDirection: "row"
},
facebook: {
marginLeft: 85,
width: 65,
height: 65
},
google: {
marginLeft: 20,
width: 65,
height: 65
},
user: {
fontSize: 18,
color: "#FFF",
marginLeft: 25,
marginTop: 17
}
});
const FirstProject = StackNavigator({
MainPage: { screen: Main },
SplashPage: { screen: Splash },
SigninPage: { screen: Signin },
ForgetPage: { screen: Forget },
});
export default FirstProject;
//Code or the Splash Screen
import React, { Component } from 'react';
import { AppRegistry, View, Text, Image, StyleSheet, TouchableHighlight } from 'react-native';
import { StackNavigator } from 'react-navigation';
import Home from './Home';
class Splash extends Component {
//=======navigation optionpane========//
static navigationOptions = {
title: 'Welcome',
header: null
};
//====================================//

render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.contain}>
<Image source={require('../images/splash.jpg')} style={{
height: 435, width: 300,
marginHorizontal: 30, marginTop: 52
}}>
<TouchableHighlight onPress={() => navigate('HomePage')} >
<Image source={require('../images/cancel.png')} style={styles.container}>
</Image></TouchableHighlight>
<Image source={require('../images/facebook-logo.png')} style={styles.facebook}></Image>
</Image>
<View style={styles.dir}>
<TouchableHighlight >
<Image source={require('../images/heart.png')} style={styles.welcome}></Image>
</TouchableHighlight>
<Image source={require('../images/whatsapp.png')} style={styles.whatsap}></Image>
<Image source={require('../images/sharing-big-symbol.png')} style={styles.instructions}></Image>
</View>

<Image source={require('../images/google-plus.png')} style={styles.google}></Image>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
height: 30,
width: 30,
marginHorizontal: 270
},
contain: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#000000'
},
welcome: {
height: 35,
width: 35,
marginHorizontal: 40,
marginVertical: 5
},
instructions: {
height: 45,
width: 45,
marginHorizontal: 14,
marginVertical: 5
},
whatsap: {
height: 35,
width: 35,
marginLeft: 135,
marginVertical: 9
},
facebook: {
height: 35,
width: 35,
marginLeft: 247,
marginVertical: 368
},
google: {
height: 35,
width: 35,
marginLeft: 235
},
dir: {
flexDirection: 'row'
}
});
const SplashPage = StackNavigator({
SplashPage: { screen: Splash },
HomePage: { screen: Home}
});
export default SplashPage;
// Code for the Home Page
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View, Image,
TouchableHighlight,
DrawerLayoutAndroid,
TouchableOpacity
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import Main from './Main';
import About from './meditationpages/about';

class Home extends Component {
openDrawer() {
this.refs['DRAWER'].openDrawer()
}

//=======navigation optionpane========//
static navigationOptions = {
title: 'Welcome',
header: null
};
//====================================//
render() {
navigationView = (
<View style={{ flex: 1, backgroundColor: '#B0E0E6', }}>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Home</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Meditation</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Art & Wellness</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>One - on - One counselling</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Health Moments</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Blogs</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Live Sessions</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Forums</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Masters</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Global Events & Retreats</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Interview/Audio/Video</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Online Learning</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>e-store</Text>
</View>
);
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<DrawerLayoutAndroid
drawerWidth={250}
ref={'DRAWER'}
drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView={() => navigationView}>
<View style={styles.welcome}>
<TouchableHighlight onPress={() => this.openDrawer()}>
<Image source={require('../images/menu.png')} style={styles.imagess}></Image>
</TouchableHighlight>

<Image source={require('../images/home.png')} style={[styles.imagess, styles.menu_diff]}></Image>
<TouchableHighlight onPress={() => navigate('AboutPage')} >
<Image source={require('../images/meditation.png')} style={[styles.imagess, styles.icon_diff]}></Image></TouchableHighlight>
<Image source={require('../images/art.png')} style={[styles.imagess, styles.icon_diff]}></Image>
</View>
<TouchableHighlight onPress={() => navigate('MainPage')} style={styles.set}>
<View style={styles.button}>
<Text style={styles.buttonText} > Logout</Text>
</View>
</TouchableHighlight>

</DrawerLayoutAndroid>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#4682B4',
},
welcome: {
flexDirection: 'row',
marginTop: 10,
backgroundColor: '#4682B4'
},
imagess: {
marginLeft: 10,
height: 35,
width: 35
},
menu_diff: {
marginLeft: 177
},
icon_diff: {
marginLeft: 15
},
buttonText: {
color: '#FFF',
fontSize: 20
},
button: {
backgroundColor: "#FF8C00",
paddingVertical: 15,
marginVertical: 15,
marginHorizontal: 120,
width: 100,
height: 40,
alignItems: "center",
justifyContent: "center"
},
set: {
marginTop: 250,
justifyContent: 'center',
alignItems: 'center',
},
});
const HomePages = StackNavigator({
HomePage: { screen: Home },
AboutPage: { screen: About },
MainPage:{ screen: Main},
});
export default HomePages

Answer 1

我已经解决了这个问题。我评论了一行

const HomePages = StackNavigator({
HomePage: { screen: Home },
AboutPage: { screen: About },
// MainPage:{ screen: Main}, //Commenting this line solved the issue
});

也许主页引用已经创建，这就是它产生问题的原因。