[React Native] React Navigation - 13. [Tab] Style 설정

 

 

---

 

---

 

---

13. [Tab] Style 설정

stack navigator, drawer navigator와 유사한데 tab navigator도 drawer navigator와 마찬가지로 각 Screen 컴포넌트에 개별 스타일링은 하지 않는다. 모두 공통적인 스타일을 갖게 되는 ui이기 때문에 navigator 태그 안에 스타일링을 준다.

 

각 탭에 그림을 삽입함과 동시에 선택되어진 탭의 크기를 좀 더 크게 키워주도록 해보자. 그럼 어떤 탭이 선택되었는지 알아야 하기 때문에 route를 파라미터로 넘겨준다.

 

원래는 tabBarOptions로 스타일을 정의했지만 이게 deprecated 되고 ScreenOptions를 사용하는 것으로 권장된다. 

사실 tabBarOptions 안에 썼던 프로퍼티들 앞에 tabBar를 붙이면 tabBar에 대한 ScreenOptions가 되고 drawer를 붙이면 drawer에 대한 ScreenOptions가 된다는 점을 기억하면 바꾸기가 쉽다.

 

그런데 이렇게 코드를 짜면 가지고 있는 그림으로 한 것이라 그림의 통일성이 떨어지기 쉽다. 스타일이나 분위기나 톤이 유사해야 일관성이 있다. 그래서 react native에서는 vector-icon이라는 것을 제공한다. 다음 강에서 이걸 다루도록 하자.

 

home_tab.js

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

import React, {Component} from 'react';
import {StyleSheet, Text, View, Button} from 'react-native';

class TabHomeScreen extends Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
        }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({});

export default TabHomeScreen;

user_tab.js

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

import React, {Component} from 'react';
import {StyleSheet, Text, View, Button, Image} from 'react-native';

import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import Logo from './assets/pics/home_icon.png';

class TabUserScreen extends Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
        }}>
        <Text>User Screen</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({});

export default TabUserScreen;

message_tab.js

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

import React, {Component} from 'react';
import {StyleSheet, Text, View, Button, Image} from 'react-native';

import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import Logo from './assets/pics/home_icon.png';

class TabMessageScreen extends Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
        }}>
        <Text>Message Screen</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({});

export default TabMessageScreen;

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';

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

  if (name == 'Home') {
    iconImagePath = require('./src/assets/pics/home_icon.png');
  } else if (name == 'User') {
    iconImagePath = require('./src/assets/pics/user_icon.png');
  } else if (name == 'Message') {
    iconImagePath = require('./src/assets/pics/message_icon.png');
  }
  return (
    <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;

 

---

참고 자료

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 - 인프런 | 강의