1. 首页
  2. 问答
  3. 反应原生导航错误。 'Main'应该声明一个屏幕

反应原生导航错误。 'Main'应该声明一个屏幕

2017-07-17 170 views
1

我目前正在使用React Native和新的React Navigation。但出现错误：目前在一个屏幕中出现错误。反应原生导航错误。 'Main'应该声明一个屏幕

导航是如下

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

MainScreen首页工作正常不过的主屏幕，主要是行不通的。

下面是未来

'主' 的错误应该申报的屏幕

//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=="[email protected]" && this.state.txt_input_password=="abc123"){ 
navigate('SplashPage') 
}else{ 
Alert.alert('Wrong username/password'); 
} 
} 
} 

validateEmail(email) { 
if(/^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[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

来源

2017-07-17 Paras Watts

回答

0

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

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

也许主页参考已经被创建，这就是为什么它会产生问题。

来源

2017-07-19 05:14:13

相关问题

 相关问题