React-Native bottom navigation

RN을 공부하면서 사용해봤던 외부 라이브러리들 정리노트

react-native bottom navigation

npm install @react-navigation/native
npm install @react-navigation/bottom-tabs

많은 어플에있는 하단 메뉴바를 만들어 보자

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {NavigationContainer} from '@react-navigation/native';

으로 import하고 앱의 실행파일에서 BottomTabNavigator로 하단바를 만들어준다.

const Tab = createBottomTabNavigator();

const App = () => {
  return (
    <View style={styles.container}>
      <NavigationContainer>
        <Tab.Navigator
          screenOptions={({route}) => ({
            tabBarIcon: ({focused, color, size}) => {
              let iconName;
              if (route.name === 'Home') {
                iconName = focused
                  ? require('./assets/images/home_ch.png')
                  : require('./assets/images/home_un.png');
              } else if (route.name === 'Ranking') {
                iconName = focused
                  ? require('./assets/images/ranking_ch.png')
                  : require('./assets/images/ranking_un.png');
              } else if (route.name === 'Statisctics') {
                iconName = focused
                  ? require('./assets/images/calendar_ch.png')
                  : require('./assets/images/calendar_un.png');
              } else if (route.name === 'MyPage') {
                iconName = focused
                  ? require('./assets/images/user_ch.png')
                  : require('./assets/images/user_un.png');
              }

              return (
                <Image source={iconName} style={{width: 25, height: 25}} />
              );
            },
          })}>
          <Tab.Screen name="Home" component={HomeScreen} />
          <Tab.Screen name="Ranking" component={RankingScreen} />
          <Tab.Screen name="Statisctics" component={StatisticsScreen} />
          <Tab.Screen name="MyPage" component={MyPageScreen} />
        </Tab.Navigator>
      </NavigationContainer>
    </View>
  );
};

위와 같이 NaviationContainer안에다가 Tab.Navigator에 screenOptions를 foucse값(현재 화면이 보여주는것) 에따라 아이콘을 변경해서 어느화면인지 보여주는 방식으로 만든다.

이때 foucsed = 가 true면 그 화면에 있는것이기 때문에 icon이 검은색으로 칠해진 icon을 사용하고 false일 경우엔 칠해지지 않은 icon을 사용해서 어느 화면에 위치하고 있는지를 보여주었다.

그리고 icon을 icoName값으로 return해주어서 아이콘을 지정해주었다.

그리고 밑에 Tab.Screen 으 하단 tab의 이름값과 componet(다른 화면들)을 import해와서 순서대로 추가해주었다.

위와같이 잘 적용된다!