React-Native Navigation

사이드 플젝을 하면서 React-Native를 이용해 App을 만들기로 했다.
그냥 React랑 비슷하다기에 무작정 시작했는데 음.. 비슷하면서도 조금 많이 다르다 ㅎㅎ 😥

어쨌든 시작했으니 해보는 수밖에.. 일단 Routing이 다르기에 공식문서를 보며 공부해보자.

& npx react-native@latest init AwesomeProject

공식 문서 그대로 react-native 프로젝트를 생성해줬다.
사실 프로젝트를 만들기 전에 sdk랑 뭐뭐뭐 설치해야 했는데.. 그냥 공식 문서 보면서 순서대로 따라하다 보니 되었다.

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

$ npm install react-native-screens react-native-safe-area-context

차례대로 설치 해주었다.

App.tsx 에

// import 해주고
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {NavigationContainer} from '@react-navigation/native';

// 생성해주고
const Stack = createNativeStackNavigator(); 

const App = () => {
  return (
    // BrowserRouter랑 비슷한 건가..?
    <NavigationContainer> 
      {
        //Routes 같고
        <Stack.Navigator> 
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Profile" component={ProfileScreen} />
        </Stack.Navigator>
      }
    </NavigationContainer>
  )
}

import {NavigationProp, ParamListBase} from '@react-navigation/native';

interface HomeScreenProps {
  navigation : NavigationProp<ParamListBase>
}
/**
 * @param navigation:NavigationProp<ParamListBase>;
 * NavigationProp은 해당 화면이나 컴포넌트에서 다른 화면으로의 네비게이션을 가능하게 해주는 속성과 메서드를 포함한 객체입니다.
 * ParamListBase는 라우팅에 사용되는 스크린 이름과 해당 스크린에 전달되는 파라미터를 정의한 타입입니다.
 * 일반적으로 ParamListBase는 라우팅 구성에서 정의한 ParamList 타입이 됩니다.
 * NavigationProp 객체는 navigate, goBack, push, pop 등의 메서드를 포함하고 있어, 이를 통해 다른 화면으로 이동하거나 이전 화면으로 돌아갈 수 있습니다.
 */
const HomeScreen = ({navigation}:HomeScreenProps)=>{
  return (
    <View>
      <Button
        title="Go to Jans"
        onPress={() => navigation.navigate('Profile')}
      />
    </View>
  );
}

const ProfileScreen = () => {
  return <Text>This is's profile</Text>;
};

잘 된다~~