如何使用StackNavigator

Question

当前行为 我想从FullNameEmailPhoneDOB.js导航到UsernamePassword.js，但我无法。我可以使用StackNavigator从App.js导航到Login.js，从App.js导航到FullNameEmailPhoneDOB.js。是否可以使用StackNavigator在3个屏幕之间导航，就像我在这里尝试做的那样。

预期行为 我应该能够使用StackNavigator成功地从App.js导航到FullNameEmailPhoneDOB.js然后导航到UsernamePassword.js

App.js

import React from 'react';
import { StyleSheet, Text, View,TouchableOpacity, AppRegistry} from 'react-native';
import { StackNavigator } from 'react-navigation'; // 1.0.0-beta.23
import Login from './screens/Login/Login';
import FullNameEmailPhoneDOB from './screens/SignUp/FullNameEmailPhoneDOB';
import UsernamePassword from './screens/SignUp/UsernamePassword';

class App extends React.Component {

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

          <View style={styles.boxContainer}>
            <View style = {[styles.boxContainer, styles.boxOne]}>
              <Text style={styles.paragraph}>Tido</Text>
            </View>

              <View style={styles.boxContainerToggle}>
                <TouchableOpacity style={[styles.boxContainer, styles.boxTwo]} onPress={() => this.props.navigation.navigate('Login')}>
                    <Text style={styles.paragraph}>Login</Text>
                </TouchableOpacity>

                <TouchableOpacity style={[styles.boxContainer, styles.boxThree]} onPress={() => this.props.navigation.navigate('FullNameEmailPhoneDOB')}>
                    <Text style={styles.paragraph}>Sign Up</Text>
                </TouchableOpacity>
              </View>          
          </View>

      </View>

    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',

  },
  boxContainer: {
    flex: 1, // 1:3
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'white',

  },

  boxContainerToggle: {
    flex: 1, 
    flexDirection: 'row',
    padding: 20

  },
  boxOne: {
    flex: 6, // 5:6
    justifyContent: 'space-around',
    alignItems: 'center',


  },
  boxTwo: {
    flex: 1, // 1:6
    backgroundColor: 'powderblue',
    flexDirection: 'row',
    width: '50%',
    height: '100%',


  },
  boxThree: {
    flex: 1, // 1:6
    flexDirection: 'row',
    backgroundColor: 'skyblue',
    width: '50%',
    height: '100%'

  },
  paragraph: {
    margin: 24,
    fontSize: 27,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#34495e',
  }, 
});

const appScreens = StackNavigator({
  Index: { screen: App },
  Login: { screen: Login },
  FullNameEmailPhoneDOB: { screen: FullNameEmailPhoneDOB },
  UsernamePassword: { screen: UsernamePassword }
})


AppRegistry.registerComponent('tido', () => appScreens);
export default appScreens;

Login.js

import React from 'react';
import {StyleSheet, View, TextInput, TouchableOpacity, Text, KeyboardAvoidingView} from 'react-native';


export default class Login extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return(
          <KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={60} style={styles.container}>
                <View style={styles.boxContainer}>
                    <View style = {[styles.boxContainer, styles.boxOne]}>
                        <TextInput 
                            style={styles.inputBox} 
                            placeholder="username,email or phone"
                            placeholderTextColor="#00000030"
                            underlineColorAndroid="transparent"
                            autoCapitalize="none">
                        </TextInput>

                        <TextInput 
                            style={styles.inputBox}
                            secureTextEntry={true}
                            placeholder="password"
                            placeholderTextColor="#00000030"
                            underlineColorAndroid="transparent">
                        </TextInput>
                    </View>

                     <View style={styles.boxContainerToggle}>
                         <TouchableOpacity 
                            style={[styles.boxContainer, styles.boxTwo]}>
                              <Text style={styles.paragraph}>Login</Text>
                        </TouchableOpacity>
                    </View>          
                </View>   
            </KeyboardAvoidingView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white'
    },
    boxContainer: {
        flex: 1, // 1:3
        justifyContent: 'center',


      },
      boxContainerToggle: {
        flex: 1, 
        flexDirection: 'row',
        padding: 20,
        backgroundColor: 'white',

      },
      boxOne: {
        flex: 5, // 5:6
        backgroundColor: 'white',
        padding: 20

      },

      boxTwo: {
        flex: 1, // 1:6
        backgroundColor: '#252525',
        flexDirection: 'row',
        width: '100%',
        height: '100%',
        alignItems: 'center'

      },
      inputBox: {
          height: 40,
          backgroundColor: '#B6B6B630',
          marginBottom: 10,
          paddingHorizontal: 10,

      },

      paragraph: {
        fontSize: 27,
        fontWeight: 'bold',
        textAlign: 'center',
        color: '#FFFFFF',

      },
});

FullNameEmailPhoneDOB.js

import React from 'react';
import {StyleSheet, View, TextInput, TouchableOpacity, Text, KeyboardAvoidingView, AppRegistry} from 'react-native';
import UsernamePassword from './screens/SignUp/UsernamePassword';
import { StackNavigator } from 'react-navigation'; // 1.0.0-beta.23


class FullNameEmailPhoneDOB extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return(
          <KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={60} style={styles.container}>
                <View style={styles.boxContainer}>
                    <View style = {[styles.boxContainer, styles.boxOne]}>
                        <TextInput 
                            style={styles.inputBox} 
                            placeholder="full name"
                            placeholderTextColor="#00000030"
                            underlineColorAndroid="transparent"
                            autoCapitalize="none">
                        </TextInput>

                        <TextInput 
                            style={styles.inputBox}
                            placeholder="email or phone"
                            placeholderTextColor="#00000030"
                            underlineColorAndroid="transparent">
                        </TextInput>

                        <TextInput 
                            style={styles.inputBox}
                            secureTextEntry={true}
                            placeholder="password"
                            placeholderTextColor="#00000030"
                            underlineColorAndroid="transparent">
                        </TextInput>
                    </View>

                     <View style={styles.boxContainerToggle}>
                         <TouchableOpacity 
                            style={[styles.boxContainer, styles.boxTwo]} onPress={() => this.props.navigation.navigate('UsernamePassword')}>
                              <Text style={styles.paragraph}>Create Account</Text>
                        </TouchableOpacity>
                    </View>          
                </View>   
            </KeyboardAvoidingView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white'
    },
    boxContainer: {
        flex: 1, // 1:3
        justifyContent: 'center',


      },
      boxContainerToggle: {
        flex: 1, 
        flexDirection: 'row',
        padding: 20,
        backgroundColor: 'white',

      },
      boxOne: {
        flex: 5, // 5:6
        backgroundColor: 'white',
        padding: 20

      },

      boxTwo: {
        flex: 1, // 1:6
        backgroundColor: '#252525',
        flexDirection: 'row',
        width: '100%',
        height: '100%',
        alignItems: 'center'

      },
      inputBox: {
          height: 40,
          backgroundColor: '#B6B6B630',
          marginBottom: 10,
          paddingHorizontal: 10,

      },

      paragraph: {
        fontSize: 27,
        fontWeight: 'bold',
        textAlign: 'center',
        color: '#FFFFFF',

      },
});

const appScreens = StackNavigator({
  FullNameEmailPhoneDOB: { screen: FullNameEmailPhoneDOB },
  UsernamePassword: { screen: UsernamePassword }
})

AppRegistry.registerComponent('tido', () => appScreens);
export default appScreens;

UsernamePassword.js

import React from 'react';
import {StyleSheet, View, TextInput, TouchableOpacity, Text, KeyboardAvoidingView, Button} from 'react-native';


export default class UsernamePassword extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return(
          <KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={60} style={styles.container}>
                <View style={styles.boxContainer}>
                    <View style = {[styles.boxContainer, styles.boxOne]}>
                        <TextInput 
                            style={styles.inputBox} 
                            placeholder="username"
                            placeholderTextColor="#00000030"
                            underlineColorAndroid="transparent"
                            autoCapitalize="none">
                        </TextInput>

                        <TextInput 
                            style={styles.inputBox}
                            placeholder="password"
                            placeholderTextColor="#00000030"
                            underlineColorAndroid="transparent">
                        </TextInput>
                    </View>

                     <View style={styles.boxContainerToggle}>
                         <TouchableOpacity 
                            style={[styles.boxContainer, styles.boxTwo]}>
                            <Button style={styles.button}/>
                              <Text style={styles.paragraph}>Next</Text>
                        </TouchableOpacity>
                    </View>          
                </View>   
            </KeyboardAvoidingView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white'
    },
    boxContainer: {
        flex: 1, // 1:3
        justifyContent: 'center',


      },
      boxContainerToggle: {
        flex: 1, 
        flexDirection: 'row',
        padding: 20,
        backgroundColor: 'white',

      },
      boxOne: {
        flex: 5, // 5:6
        backgroundColor: 'white',
        padding: 20

      },

      boxTwo: {
        flex: 1, // 1:6
        backgroundColor: '#FFFFFF',
        flexDirection: 'row',
        width: '100%',
        height: '100%',
        alignItems: 'center'

      },
      inputBox: {
          height: 40,
          backgroundColor: '#B6B6B630',
          marginBottom: 10,
          paddingHorizontal: 10,

      },

      paragraph: {
        fontSize: 27,
        fontWeight: 'bold',
        textAlign: 'center',
        color: '#252525',

      },

      button:{
        borderColor: 'black',
      },
});

Answer 1

我将FullNameEmailPhoneDOB和UsernamePassword导入App.js.然后我将页面添加到StackNavigator。