React Native | Bottom Tabs Navigator 화면 전환 구현

아래 React Native 개발 환경 구축을 바탕으로 작성되었습니다.

React Native | 맥(Mac) 개발 환경 구축

 

---

 

이 페이지에서는 navigation/bottom-tabs, 화면 전환 기능을 만들어본다.

 

 

 

@react-navigation/native, bottom-tabs 설치

 

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

 

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

 

npx pod-install ios

 

 

Bottom Tab에 들어갈 이미지 준비, 선택되었을 때 구분을 위해 4가지로 준비했다.

파일 : home.png, home_fill.png, page.png, page_fill.png
경로 : /프로젝트/assets/images/

 

 

 

App.js

 

import React from 'react';
import type {Node} from 'react';
import {
  Text,
  View,
  Image
} from 'react-native';

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

const Tab = createBottomTabNavigator();

function Home() {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Home</Text>
        </View>
    );
}

function MyPage() {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>MyPage</Text>
        </View>
    );
}

function App() {
    return (
        <NavigationContainer>
            <Tab.Navigator
                screenOptions={({ route }) => ({
                    tabBarIcon: ({ focused, color, size }) => {
                        let iconName;

                        if (route.name === "Home") {
                            iconName = focused ? require('./assets/images/home_fill.png') : require('./assets/images/home.png');
                        } else if (route.name === "MyPage") {
                            iconName = focused ? require('./assets/images/page_fill.png') : require('./assets/images/page.png');
                        }

                        return <Image source={iconName} style={{ width: 25, height: 25 }} />;
                    },
                })}
                tabBarOptions={{ activeTintColor: 'tomato', inactiveTintColor: 'gray' }}
            >
                <Tab.Screen name="Home" component={Home} />
                <Tab.Screen name="MyPage" component={MyPage} />
            </Tab.Navigator>
        </NavigationContainer>
    );
}

export default App;

 

 

---

app.js

0.00MB

 

#Reference
https://reactnavigation.org/docs/getting-started