엑스포 프로젝트에서 내비게이션 화면 만들기 🧑‍💻

오늘, 우리는 처음부터 엑스포 프로젝트에서 내비게이션 화면을 만들고 있습니다. 이를 위해 먼저 react-native 프로젝트를 생성해 봅시다.

expo init online-store

위의 명령을 실행한 후 enter 를 클릭하면 기본 옵션이 선택됩니다.

이제 react-native 프로젝트가 있습니다. 이제 다음과 같은 몇 가지 종속성을 더 설치해야 합니다.

npm install @react-navigation/native @react-navigation/native-stack

expo install react-native-screens react-native-safe-area-context

이제 app.js로 이동하여 기존 코드를 삭제합니다. 필요하지 않습니다. 아래 코드가 필요합니다.

import { StyleSheet, Text, View } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import Homepage from "./Screens/Homepage";
import MenSection from "./Screens/MenSection";
import WomenSection from "./Screens/WomenSection";
import Contactus from "./Screens/Contactus";
const stack = createNativeStackNavigator();
export default function App() {
  return (
    <NavigationContainer>
      <stack.Navigator>
        <stack.Screen
          name="Home"
          component={Homepage}
          options={{ title: "Welcome to online store" }}
        />
        <stack.Screen name="Men" component={MenSection} />
        <stack.Screen name="Women" component={WomenSection} />
        <stack.Screen name="Contact" component={Contactus} />
      </stack.Navigator>
    </NavigationContainer>
  );
}

지금 프로젝트를 실행하면 처음으로 홈페이지를 볼 수 있습니다. 다른 페이지로 이동하려면 여기에서 버튼이나 다른 onClick 메서드를 사용할 수 있으며 이를 위해 다른 페이지로 리디렉션하는 데 도움이 되는 prop {navigation}이 있습니다.

const Homepage= ({ navigation }) => {
  return (
    <Button
      title="Go to men's section"
      onPress={() =>
        navigation.navigate('Men', { state: 'Id of clothing' })
      }
    />
  );
};
const Men= ({ navigation, route }) => {
  return <Text>This is {route.params.state}'s profile</Text>;
};

결론

이것이 반응 네이티브 탐색의 전부입니다. 이제 더 많은 사용 사례로 재생하고 원하는 대로 더 발전시킬 수 있습니다.