使用堆栈呈现新屏幕的正确方法？答案

【问题标题】：Correct way of presenting a new screen with a stack?使用堆栈呈现新屏幕的正确方法？
【发布时间】：2022-10-13 00:30:03
【问题描述】：

我有一个包含 4 个步骤的注册页面（4 个单独的屏幕）。在第一页，用户在一个字段中输入他们的用户名，在第二页输入显示名称，第三页输入他们的生日，第四页输入密码。

这是我当前的注册屏幕文件：

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

const SignupScreen = () => {
  return (
    <View>
      <Text>First step</Text>
      <Button
        title="Next step"
        />
    </View>
  );
}

export default SignupScreen;

但是我有点困惑当用户点击按钮时如何呈现下一个屏幕。如何在这里创建堆栈？或者我会在 App.js 文件中执行此操作吗？

这是我的App.js：

import { StatusBar } from 'expo-status-bar';
import { FlatList, StyleSheet, Text, View, TouchableHighlight } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';

import {
  RootStack,
  TabsStack,
  SignupStack
} from './navigation/navigation';

export default function App() {
  return (
    <NavigationContainer>
      <RootStack.Navigator>
        <RootStack.Screen
          name="Tabs"
          options={{ headerShown: false }}
          component={TabsStack}
          />
        <RootStack.Screen
          name="SignupStack"
          options={{ headerShown: false }}
          component={SignupStack}
          />
      </RootStack.Navigator>
    </NavigationContainer>
  );
}

这是我的navigation.js 文件：

import React from 'react';
import { FlatList, StyleSheet, Text, View, TouchableHighlight } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import SignupScreen from '../screens/SignupScreen';

export const RootStack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
const SignupNav = createNativeStackNavigator();

export const TabsStack = () => (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="History" component={SecondScreen} />
      <Tab.Screen name="Third" component={ThirdScreen} />
      <Tab.Screen name="Fourth" component={FourthScreen} />
    </Tab.Navigator>
  );

export const SignupStack = () => (
    <SignupNav.Navigator>
      <SignupNav.Screen
        name="Signup"
        component={SignupScreen}
        options={{ headerTitle: 'Sign up' }}
      />
    </SignupNav.Navigator>
  );


  function HomeScreen() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home</Text>
      </View>
    );
  }
  
  function SecondScreen() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Second</Text>
      </View>
    );
  }
  
  function ThirdScreen() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Third</Text>
      </View>
    );
  }
  
  function FourthScreen({ navigation }) {
    function onPressButton() {
      navigation.navigate('SignupStack');
    }
  
    return (
      <View>
        <FlatList
          data={[
            {key: 'Signup'},
          ]}
          renderItem={({item}) => <TouchableHighlight onPress={onPressButton} underlayColor="white"><Text>{item.key}</Text></TouchableHighlight>}
        />
      </View>
    );
  }

这样做的正确方法是什么？

谢谢

【问题讨论】：

标签： react-native expo

【解决方案1】：

我知道的最好方法，将所有屏幕作为组件并将其导入注册屏幕

/*
import all you component(pages) here...
*/

const [screen, setScreen] = useState(1)

{screen == 1 ? (
    <ScreenOne 
      onNext={()=>setScreen(2)}
    />
) : screen == 2 ? (
   <ScreenTwo
      onNext={()=>setScreen(3)}
    /> 
) : screen == 3 ? (
   <ScreenThree 
      onNext={()=>setScreen(4)}
    /> 
)

}

您可以将所有状态和回调函数从注册页面传递给所有组件从组件中获取值

【讨论】：