React Native中如何用Stack实现四步注册页面的跳转？

1. 导航栈配置（navigation.js） #

首先要把四个注册相关的屏幕都注册到Stack导航中，这是实现屏幕跳转的基础。假设你已经创建了另外三个屏幕：NicknameScreen、BirthdayScreen、PasswordScreen，代码示例如下：

import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import SignupScreen from './SignupScreen';
import NicknameScreen from './NicknameScreen';
import BirthdayScreen from './BirthdayScreen';
import PasswordScreen from './PasswordScreen';

const Stack = createStackNavigator();

export default function AppNavigation() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Signup">
        <Stack.Screen name="Signup" component={SignupScreen} options={{ title: '注册第一步：用户名' }} />
        <Stack.Screen name="Nickname" component={NicknameScreen} options={{ title: '注册第二步：昵称' }} />
        <Stack.Screen name="Birthday" component={BirthdayScreen} options={{ title: '注册第三步：生日' }} />
        <Stack.Screen name="Password" component={PasswordScreen} options={{ title: '注册第四步：密码' }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

2. 根组件配置（App.js） #

将导航组件作为根组件引入并渲染：

import AppNavigation from './navigation';

export default function App() {
  return <AppNavigation />;
}

3. 实现屏幕跳转逻辑（以SignupScreen为例） #

每个注册屏幕都能通过navigation props的navigate方法跳转到下一个页面。比如在SignupScreen中，点击按钮触发跳转：

import { View, TextInput, Button } from 'react-native';

export default function SignupScreen({ navigation }) {
  return (
    <View>
      <TextInput placeholder="输入用户名" />
      <Button 
        title="下一步"
        onPress={() => navigation.navigate('Nickname')}
      />
    </View>
  );
}

后续屏幕的跳转逻辑同理：

• NicknameScreen跳转用navigation.navigate('Birthday')
• BirthdayScreen跳转用navigation.navigate('Password')

额外说明 #

• 如果需要在屏幕间传递数据（比如把用户名带到后续步骤），可以在navigate方法中添加参数：

  navigation.navigate('Nickname', { username: 输入的用户名 });
  

  在目标屏幕中通过route.params.username获取该数据。
• 若要隐藏顶部导航栏，可在对应Stack.Screen的options中设置headerShown: false。

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