[React Native] 바텀 내비게이션 및 스플래쉬화면 적용하기!

 현재 소개팅앱을 만들고 있다.

거기에 바텀 내비게이션이 필요했다. 

 그래서 만들어 보았다.

---

1. createBottomTabNavigator모듈 설치

 

 

npm install @react-navigation/bottom-tabs

 

 

2. 코드

1) 기본적인 예시

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

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

위와 같이하면 아래에 Home탭과 Setting탭만이 생긴다. 다른곳은 갈수 없다.

 

그렇다고 바텀에 다 때려박으면 밑에 메뉴가 너무 많아 난잡해질것이다.

 

2)나의 코드

import Login from './login/login';
import Signup from './sign_up/sign_up';
import Signup2 from './sign_up/sign_up2';
import Signup3 from './sign_up/sign_up3';
import Main from './main/Main';
import Match_page from './matchpage/match_page';
import Groupmatch from './groupmatch/groupmatch';
import Message from './message/message';
import Find_idpw from './Find_idpw/Find_idpw';
import Find_idpw2 from './Find_idpw/Find_idpw2';
import Splash from './splash/Splash';
import Setmain from './settingpage/set_main/Set_main';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import MessageCollect from './messageCollect/messageCollect';
import Set_privacy from './settingpage/set_privacy/Set_privacy';
import Set_alarm from './settingpage/set_alarm/Set_alarm';
import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

const Stack = createStackNavigator();
export default class App extends React.Component {
	this.state={
    isLoading : false,
    }
      componentDidMount = async () => {
    setTimeout(() => {
      this.setState({isLoading: true});
    }, 1000);
   }
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          {this.state.isLoading ? (
            <>
              <Stack.Screen
                name={this.state.fisrt_name}
                component={this.state.fisrt_components}
                options={{headerShown: false}}
              />
              <Stack.Screen
                name={this.state.second_name}
                component={this.state.second_components}
                options={{headerShown: false}}
              />
              <Stack.Screen
                name="Signup"
                component={Signup}
                options={{headerShown: false}}
              />
              <Stack.Screen
                name="Signup2"
                component={Signup2}
                options={{headerShown: false}}
              />

              <Stack.Screen
                name="Signup3"
                component={Signup3}
                options={{headerShown: false}}
              />
              <Stack.Screen
                name="MessageCollect"
                component={MessageCollect}
                options={{headerShown: false}}
              />
              <Stack.Screen
                name="Message"
                component={Message}
                options={{headerShown: false}}
              />
              <Stack.Screen
                name="FriendInbox"
                component={FriendInbox}
                options={{headerShown: false}}
              />

              <Stack.Screen
                name="Find_idpw"
                component={Find_idpw}
                options={{headerShown: false}}
              />
              <Stack.Screen
                name="Find_idpw2"
                component={Find_idpw2}
                options={{headerShown: false}}
              />

              <Stack.Screen
                name="Set_privacy"
                component={Set_privacy}
                options={{headerShown: false}}
              />
              <Stack.Screen
                name="Set_alarm"
                component={Set_alarm}
                options={{headerShown: false}}
              />
            </>
          ) : (
            <>
              <Stack.Screen
                name="Splash"
                component={Splash}
                options={{headerShown: false}}
              />
            </>
          )}
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

const Tab = createBottomTabNavigator();

function Bottom() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Man" component={Main} />
      <Tab.Screen name="Group" component={Match_page} />
      <Tab.Screen name="MessageCollect" component={MessageCollect} />
      {/* <Tab.Screen name="알림" component={Message} /> */}
      <Tab.Screen name="Setting" component={Setmain} />
    </Tab.Navigator>
  );
}

  

바텀 네비게이션에는 Man, group, MessageCollect, Setting이라는 항목이 있고

각자 누르면 Main, Match_page, MessageCollect, Message, Setmain 컴포넌트로 이동한다.

 

Man Page

Setting Page

 

개인정보 변경 페이지

 

위처럼 Man Page나 Setting Page에서는 바텀내비게이션이 유지되지만 바텀네비게이션에 속해 있지 않은 개인정보 페이지('Set_privacy' Component)같은 경우에는 바텀네비게이션이 유지되지 않는다. 

 

 

그리고 ComponentDidMount부분의  this.state.isLoading값이 false였다가 1초후에 true로간다. 

false면 splash화면 true면 메인페이지로 간다.(간단하게 스플래쉬 화면을 구현해 보았다.)

 

 

 

 

 

 

 고수님들의 피드백... 항상 달게 받겠습니다. 봐주셔서 감사합니다. 다같이 열코!!!!!