React Native Navigation错误。 'Main'应该声明一个屏幕

时间：2017-07-17 06:13:22

标签： android reactjs react-native

我目前正在使用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

MainScreen to Home工作正常但Home Screen to Main无效。

以下是错误

'Main'应该声明一个屏幕

   //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=="abc@gmail.com" && 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

1 个答案:

答案 0 :(得分：0)

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

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

可能已经创建了主页引用，这就是为什么它会产生问题。

相关问题
最新问题