Bottom tabs Navigation listeners 등록

일반적으로 Bottom tabs Navigator에 등록된 Screen을 누르면 component에 등록된 첫번째 스택이 보여지게 됩니다.

하지만 메모 앱과 같이 Screen을 누르면 다음 스택(메모 작성 화면)으로 이동하는 기능을 추가하고 싶을 때는 Screen에 listeners를 등록해주고 navigation.navigate() 함수를 사용하여 이동되도록 하면 됩니다.

 

flow : 앱 실행 -> Bottom tabs Navigator의 첫번째 Screen Load -> 첫번째 Screen의 component에 등록된 첫번째 Stack이 화면에 보여짐 -> tabBarIcon을 누르면 listeners에서 다음 스택으로 이동하는 함수 호출

// BottomNavigation.tsx
<BottomStack.Navigator>
  <BottomStack.Screen
    name={BottomTabNameList.void}
    component={MainNavigation}
    listeners={({navigation, route}) => ({
      tabPress: e => {
        // Prevent default action
        e.preventDefault();

        // Do something with the `navigation` object
        navigation.navigate(AllScreenList.WriteNote);
      },
    })}
    options={{
      tabBarIcon: ({focused}) => (
        <View
          style={{
            alignItems: 'center',
            justifyContent: 'center',
            top: Platform.OS === 'ios' ? -10 : -20,
            width: Platform.OS === 'ios' ? 70 : 60,
            height: Platform.OS === 'ios' ? 70 : 60,
            borderRadius: Platform.OS === 'ios' ? 35 : 30,
            backgroundColor: Color.yellow,
          }}>
          <StackIcon 
            focused={focused} 
            Icon={IconPenIcon} 
            size={27} 
          />
        </View>
      ),
    }}
  />
</BottomStack.Navigator>


// MainNavigation.tsx
<Stack.Navigator>
  <Stack.Screen
    name={AllScreenList.Main}
    component={Main}
    options={{headerShown: false}}
  />
  <Stack.Screen
    name={AllScreenList.WriteNote}
    component={WriteNote}
    options={{headerShown: false}}
  />
</Stack.Navigator>