如何使用StackNavigator实现三页面跳转？跳转异常问题求助

Got it, let's figure out why your three-page navigation flow isn't working as expected. The core issue here is that you're redefining a new StackNavigator and re-registering your app component inside FullNameEmailPhoneDOB.js—this breaks the single, unified navigation hierarchy you set up in App.js.

Why This Breaks Navigation #

React Navigation relies on one root navigator to manage all your app's screens. When you create a new StackNavigator and run AppRegistry.registerComponent inside a child screen, it overrides the original root navigator from App.js. This means the navigation prop in FullNameEmailPhoneDOB is no longer connected to the correct navigation stack, so calls to navigate('UsernamePassword') don't trigger the expected jump.

The Fix #

You only need one root navigator (defined in App.js). All other screens should just export their component—no extra navigators or AppRegistry calls. Here's the corrected FullNameEmailPhoneDOB.js:

Corrected FullNameEmailPhoneDOB.js

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

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, 
    justifyContent: 'center', 
  }, 
  boxContainerToggle: { 
    flex: 1, 
    flexDirection: 'row', 
    padding: 20, 
    backgroundColor: 'white', 
  }, 
  boxOne: { 
    flex: 5, 
    backgroundColor: 'white', 
    padding: 20 
  }, 
  boxTwo: { 
    flex: 1, 
    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', 
  }, 
}); 

export default FullNameEmailPhoneDOB;

Key Changes Made: #

• Removed the redundant import UsernamePassword (the root navigator already includes this screen, so you don't need to import it here)
• Deleted the extra StackNavigator definition and AppRegistry.registerComponent call that was overriding your root navigation
• Kept only the component class, styles, and export statement

Confirm Your Root Navigator (App.js) #

Your App.js already has the correct root navigator setup—keep it as is, since it includes all three screens in the stack:

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

Final Notes #

StackNavigator fully supports multi-page navigation flows like the one you're building—you just need to maintain a single root navigator that includes all your screens. After making this fix, tapping "Create Account" in FullNameEmailPhoneDOB.js will successfully navigate to UsernamePassword.js.

内容的提问来源于stack exchange，提问作者Joseph Akayesi