[React Native] React Navigation - 15. React Native Vector Icons 활용

 

 

---

 

---

 

---

15. React Native Vector Icons 활용

https://github.com/oblador/react-native-vector-icons

GitHub - oblador/react-native-vector-icons: Customizable Icons for React Native with support for image source and full styling.

위의 깃헙 페이지에서 README.md 파일을 보면 Bundled Icon Sets 에서 Browse all 이라는 링크가 있다. 아래 링크가 해당 링크다.

https://oblador.github.io/react-native-vector-icons/

react-native-vector-icons directory

여기 아이콘이 엄청 많이 보이는데 검색으로 필요한 아이콘을 찾을 수도 있다. 폰트별로 지원하는 아이콘이 보여진다.

 

이 아이콘을 어떻게 쓰는 거지?

원래는 TabBarIcon에서 우리가 다운받은 이미지의 경로를 할당해서 출력하고 있었다.

우선 변수를 하나 만들고 그 변수에 아이콘의 이름을 넣어주기만 하면 된다.

 

const TabBarIcon = (focused, name) => {
  let iconImagePath;
  let iconName, iconSize;

  if (name == 'Home') {
    iconName="home-outline";
    // iconImagePath = require('./src/assets/pics/home_icon.png');
  } else if (name == 'User') {
    iconName="people-outline";
    // iconImagePath = require('./src/assets/pics/user_icon.png');
  } else if (name == 'Message') {
    iconName = "mail-outline";
    // iconImagePath = require('./src/assets/pics/message_icon.png');
  }
  iconSize = focused ? 30 : 20;
  return (
    <Ionicons 
      name={iconName}
      size={iconSize}
    />
    // <Image
    //   style={{
    //     width: focused ? 30 : 20,
    //     height: focused ? 30 : 20,
    //   }}
    //   source={iconImagePath}
    // />
  );
};

 

Ionicons.tff 에서 user, message 를 지원하지 않아 user의 경우 people로 message의 경우 mail로 검색 추천!

 

실행했더니 에러가 나서 pod install을 실행해봤다. 휴... 아이콘이 제대로 출력된다. 이제 삽입되는 아이콘이 일관성을 갖게 됐다.

 

vector-icon의 장점

1. 색깔, 분위기, 톤, 크기가 일관성을 가지게 되어 보기가 좋다.

2. 편하다. 그림을 다운받아서 프로젝트에 추가하고 경로를 다운받는 과정이 생략된다.

 

App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, {Component} from 'react';
import {StyleSheet, Text, View, Image, Button, Linking} from 'react-native';
import {DrawerActions, NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {
  createDrawerNavigator,
  DrawerContentScrollView,
  DrawerItem,
  DrawerItemList,
} from '@react-navigation/drawer';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import HomeScreen from './src/home';
import UserScreen from './src/user';
import LogoTitle from './src/logo';
import DrawerHomeScreen from './src/home_drawer';
import DrawerUserScreen from './src/user_drawer';
import PictogramHome from './src/assets/pics/home_icon.png';
import SideDrawer from './src/my_drawer';
import TabHomeScreen from './src/home_tab';
import TabUserScreen from './src/user_tab';
import TabMessageScreen from './src/message_tab';
import Icon from 'react-native-vector-icons/dist/Ionicons'
import Ionicons from 'react-native-vector-icons/dist/Ionicons';

const Stack = createNativeStackNavigator();
const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();
const TabBarIcon = (focused, name) => {
  let iconImagePath;
  let iconName, iconSize;

  if (name == 'Home') {
    iconName="home-outline";
    // iconImagePath = require('./src/assets/pics/home_icon.png');
  } else if (name == 'User') {
    iconName="people-outline";
    // iconImagePath = require('./src/assets/pics/user_icon.png');
  } else if (name == 'Message') {
    iconName = "mail-outline";
    // iconImagePath = require('./src/assets/pics/message_icon.png');
  }
  iconSize = focused ? 30 : 20;
  return (
    <Ionicons 
      name={iconName}
      size={iconSize}
    />
    // <Image
    //   style={{
    //     width: focused ? 30 : 20,
    //     height: focused ? 30 : 20,
    //   }}
    //   source={iconImagePath}
    // />
  );
};
// CustomDrawerContent = props => {
//   return (
//     <DrawerContentScrollView {...props}>
//       <DrawerItemList {...props} />
//       <DrawerItem
//         label="Help"
//         onPress={() => Linking.openURL('http://www.google.com')}
//         icon={() => <LogoTitle />}
//       />
//       <DrawerItem label="Info" onPress={() => alert('Info window')} />
//     </DrawerContentScrollView>
//   );
// };

class App extends Component {
  ////////////////////////////////////////stack navigator의 일부
  // logoTitle = () => {
  //   return (
  //     <Image
  //       style={{width: 40, height: 40}}
  //       source={require('./src/assets/pics/home_icon.png')}
  //     />
  //   );
  // };

  render() {
    return (
      <NavigationContainer>
        <Tab.Navigator
          initialRouteName="Home"
          ////////////////////////////deprecated
          // tabBarOptions={{
          //   inactiveBackgroundColor: '#c6cbef',
          //   activeBackgroundColor: 'skyblue',
          //   activeTintColor: 'blue',
          //   inactiveTintColor: '#fff',
          //   /////////////////////it doesn't work
          //   // style: {
          //   //   backgroundColor: '#c6cbef',
          //   // },
          //   // labelPosition: 'beside-icon',
          // }}
          screenOptions={({route}) => ({
            tabBarLabel: route.name,
            tabBarIcon: ({focused}) => TabBarIcon(focused, route.name),

            tabBarActiveBackgroundColor: 'skyblue',
            tabBarInactiveBackgroundColor: '#c6cbef',
            tabBarActiveTintColor: 'blue',
            tabBarInactiveTintColor: '#fff',
            // tabBarLabelPosition: 'beside-icon',
            tabBarLabelPosition: 'below-icon',
          })}>
          <Tab.Screen name="Home" component={TabHomeScreen} />
          <Tab.Screen name="User" component={TabUserScreen} />
          <Tab.Screen name="Message" component={TabMessageScreen} />
        </Tab.Navigator>
      </NavigationContainer>

      ////////////////////////////////////drawer navigator
      // <NavigationContainer>
      //   <Drawer.Navigator
      //     initialRouteName="Home"
      //     screenOptions={{
      //       drawerType: 'front',
      //       drawerPosition: 'right',
      //       drawerStyle: {
      //         backgroundColor: '#c6cbef',
      //         width: 200,
      //       },
      //       drawerActiveTintColor: 'red',
      //       drawerActiveBackgroundColor: 'skyblue',
      //     }}
      //     drawerContent={props => <SideDrawer {...props} />}>
      //     <Drawer.Screen
      //       name="Home"
      //       component={DrawerHomeScreen}
      //       options={{
      //         drawerIcon: () => {
      //           <Image
      //             source={PictogramHome}
      //             style={{width: 40, height: 40}}
      //           />;
      //         },
      //       }}
      //     />
      //     <Drawer.Screen name="User" component={DrawerUserScreen} />
      //   </Drawer.Navigator>
      // </NavigationContainer>

      ////////////////////////////////////////stack navigator
      // <NavigationContainer>
      //   <Stack.Navigator
      //     initialRouteName="Home"
      //     screenOptions={{
      //       headerStyle: {
      //         backgroundColor: '#a4511e',
      //       },
      //       headerTintColor: '#ffffff',
      //       headerTitleStyle: {
      //         fontWeight: 'bold',
      //         color: '#f3d612',
      //       },
      //     }}>
      //     <Stack.Screen
      //       name="Home"
      //       component={HomeScreen}
      //       options={{
      //         title: 'Home Screen',
      //         headerTitle: () => <this.logoTitle />,
      //         headerRight: () => (
      //           <Button
      //             title="info"
      //             onPress={() => alert('I am a button!!')}
      //             color="orange"
      //           />
      //         ),
      //       }}
      //     />
      //     <Stack.Screen
      //       name="User"
      //       component={UserScreen}
      //       initialParams={{
      //         userIdx: 50,
      //         userName: 'Gildong',
      //         userLastName: 'Go',
      //       }}
      //       options={{
      //         title: 'User Screen',
      //         headerStyle: {
      //           backgroundColor: 'pink',
      //         },
      //         headerTintColor: 'red',
      //         headerTitleStyle: {
      //           fontWeight: 'bold',
      //           color: 'purple',
      //         },
      //       }}
      //     />
      //   </Stack.Navigator>
      // </NavigationContainer>
    );
  }
}

const styles = StyleSheet.create({});

export default App;

 

다음 강에서는 지금까지 배운 Stack, Drawer, Tab 여러 개의 navigator를 같이 쓰는 방법을 알아보자.

---

참고 자료

https://www.inflearn.com/course/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-%EA%B8%B0%EC%B4%88/dashboard

iOS/Android 앱 개발을 위한 실전 React Native - Basic - 인프런 | 강의