React Native 독서기록 앱 개발일지 - Navigation 생성

thoho·2022년 12월 12일
0
post-thumbnail

점점 js 파일이 많아져서 정리가 필요했다. src 폴더를 만들어서 App.js를 제외한 js파일들을 전부 넣어주었다. 그 과정에서 import 경로들이 바뀌었는데, 이 경우 오류가 발생하면 npm run android를 다시 돌려주어야 하는듯.

화면 전환: Navigation

React Native에서 화면을 전환할 때에는 Navigation을 사용한다.
NavigationContainer에 전환하려는 Screen들을 등록해두고, 이 Screen들 간의 화면 전환이 가능하게 해준다.

참고 Document

설치 및 사용 방법 튜토리얼
React Navigation Docs

설치

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

위의 패키지들을 사용하려면 포함하는 Dependencies들을 함께 설치해주어야한다.

npm install react-native-screens
npm install react-native-safe-area-context
// Navigation.js

import React from "react";
import { Search } from "./Search";
import Home from './Home';
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

const Stack = createNativeStackNavigator();

const Navigator = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} options={{headerShown: false}}/>
        <Stack.Screen name="Search" component={Search} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

App.jsNavigation.js로 연결되도록 설정해두었다. 이 파일에 NavigationContainer를 등록해 두어, 화면 전환에 사용할 Screen들을 미리 등록해두었다.
Navigation은 기본적으로 화면 상단에 header가 나타난다. 만일 모든 화면에 대해 이 hdeader가 필요하지 않다면 다음과 같이 screenOptions를 추가하면 된다.

<Stack.Navigator screenOptions={{headerShown: false}}
	...
</Stack.Navigator>

만일 특정 화면에 대해서만 header가 필요하지 않다면, Screenoptions를 추가하면 된다.

<Stack.Screen options={{headerShown: false}} />

나는 Home에 대해서만 이 header가 필요하지 않으므로 Home에 해당하는 Screen에만 해당 옵션을 추가해주었다. option과 관련된 상세한 docs는 여기를 참고해보면 된다.

화면 전환

Home Component에서 버튼을 누르면, 이전에 구현해둔 Search로 넘어가도록 구현해보았다. 여전히 디자인은 우선 미뤄두고….

const Home = ({navigation}) => {
    return(
        <View>
            <Text> Home </Text>
            <Button
                title="Search"
                onPress={()=>{ navigation.navigate('Search'); }}
            />
        </View>
    )
}

화면을 전환하려면 navigation.navigate(Screen Name) 함수를 이용한다. 이 때 navigation은 Parameter로 받아오는 Navigator 관련 Object이다. 전환하려는 Screen의 이름은 앞선 NavigationContainer에 등록되어있어야한다.

여기까지 수행하면 다음과 같이 동작하는 것을 확인할 수 있다.

Search에서는 headerShown 옵션을 바꾸어주지 않아서 위에 header가 나타나는 것을 확인할 수 있다.

Screen간에 Parameter 넘기기

관련 내용은 여기를 참고하였다.
Screen간에 Parameter를 넘겨야할 경우가 있는데, 이럴 때에는 다음과 같이 route를 이용한다.

navigation.navigate('Profile', { name: 'Jane' })

해당 함수로부터 전환된 Screen은 다음과 같이 넘겨받은 값을 사용할 수 있다.

const ProfileScreen = ({ navigation, route }) => {
  return <Text>This is {route.params.name}'s profile</Text>;
};

Search Component를 좀 더 다듬은 다음 route를 사용할 것 같아서 기록만 우선 남겨두기.


사담

과거에 한번씩 다뤘던 기능들을 다시 알아보면서 진행하는 과정이 조금 아쉽다. 기록을 남겨뒀으면 좋았을텐데. 그래도 확실히 해봤던 것들이라 예전보다는 속도가 빠른 것 같아서 조금 만족 중. 이번엔 착실하게 기록을 남겨두기!

profile
어떻게든 굴러가고 있는

0개의 댓글