[React Native] React Navigator

라이브러리 설치

https://reactnavigation.org/docs

- 이곳에서 해당 라이브러리를 설치한다.

 

Stack Navigator

 

 

const Stack = createNativeStackNavigator();

<NavigationContainer>
        <Stack.Navigator
          screenOptions={{
            headerStyle: { backgroundColor: "#ccc" },
            headerTintColor: "brown",
            contentStyle: { backgroundColor: "#cfc" },
          }}
        >
          <Stack.Screen
            name="MealsCategories"
            component={CategoriesScreen}
            options={{
              title: "All Meals Categories",
            }}
          />
          <Stack.Screen name="MealsOverview" component={MealsOverviewScreen} />
        </Stack.Navigator>
      </NavigationContainer>

- Navigator를 생성해주고 네비게이터 컨테이너 안에 네비게이터와 
컴포넌트 이동할 컴포넌트를 적어준다.

 

-<Stack.Navigator>을 통해 Navigator를 설정하고 <Stack.Screen>을 통해 화면을 등록할 때는 앱이 시작할 때 어떤 화면이 기본으로 표시될지를 설정할 수 있습니다.

- 아무런 설정 없이는 가장 위에 있는 화면, 즉 <Stack.Navigator>내의 첫 번째 자식 요소가 초기 화면이 됩니다.

 

 

 

Navigator 종류

 

 

버튼 달기

 

<Drawer.Screen
        name="Categories"
        component={CategoriesScreen}
        options={{
          title: 'All Categories',
          drawerIcon: ({ color, size }) => (
            <Ionicons name="list" color={color} size={size} />
          ),
        }}
      />

- expo 아이콘 라이브러리 Ionicons로 네비게이터 헤더에
커스텀 버튼 생성 가능하다.

 

 

 

 

 

컴포넌트간 데이터 전송

 

navigation.navigate("MealsOverview", {
        categoryId: itemData.item.id,
      });

- 이름으로 지정해준 네비게이터에 오브젝트 형태의 데이터를 보내서

 

 

function MealsOverviewScreen({ route }) {
  const catId = route.params.categoryId;
  return (
    <View>
      <Text>MEALS CATEGORIES- {catId}</Text>
    </View>

- route.params로 데이터를 받아올 수 있다.

 

 

 

Drawer

 

 

 

 

 

 

BottomTab

- 다른 Navigator와 비슷한 형태이다.

 

트러블 슈팅

증상)  Navigate를 이용하며 라이브러리 버전 오류가 많이 떴다.
expo 진단 코드로

어느정도 해결이 됐나 싶었는데 
bottomTab 라이브러리를 설치하면서 또 비슷하게 오류가 떴다.

 

 

 

작업

https://github.com/HojinLim/RN_Food