상단 + 하단 네비게이션 정리

1.

프로젝트 준비하기

 

스택 네비게이터, 하단 탭 네비게이터, 아이콘

yarn add @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs react-native-screens react-native-safe-area-context react-native-vector-icons

 

아이콘 사용  

1) ios/프로젝트이름/Info.plist 의 맨 밑에...

<key>UIViewControllerBasedStatusBarAppearance</key>

    <false/>

    <key>UIAppFonts</key>

    <array>

    <string>MaterialIcons.ttf</string>

    </array>

</dict>

</plist>

2) android/app/build.gradle - 의 맨 밑에...

project.ext.vectoricons = [

    iconFontNames:['MaterialIcons.ttf']

]

apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

 

 

 

 

2. 구조 파악

 

RootStack이라는 네이티브 스택 네비게이션 이용.

mainTab : 하단 탭 네비게이션

- 이 안에 세가지 screen을 만들 것임

- writescreen(의미의 이름) 안에는 하단 탭이 나타나지 않도록 해줌 

 

(1)App.js

import React from 'react';

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

import RootStack from './screens/RootStack';

function App(){

  return <NavigationContainer>

 <RootStack/>

  </NavigationContainer>;

}

export default App;

(2) RootStack.js 

//스택 네비게이션

import react from 'react';

import {createNativeStackNavigator} from '@react-navigation/native-stack';

import MainTab from './MainTab';

import WriteScreen from'./WriteScreen';

const Stack = createNativeStackNavigator();

function RootStack(){

    return (

        <Stack.Navigator>

            <Stack.Screen

            name = "MainTab"

            component = {MainTab}

            options={{headerShown: false}}

            //false로 안하면 헤더 두개가 중첩되어 나타남

/>

        <Stack.Screen name="Write" component={WriteScreen}/>

        </Stack.Navigator>

    );

}

export default RootStack;

(3) writescreen.js (임의의 이름. 하단 탭 네비게이션이 없는 스크린) 

//하단 탭 네비게이션이 없는 스크린

import React from 'react';

import {StyleSheet,View} from 'react-native';

function WriteScreen(){

    return <View style = {StyleSheet.block}/>;

}

const styles = StyleSheet.create({

    block:{},

});

export default WriteScreen;

(4)FeedsScreen.js ( 하단 탭 내부의 스크린들. 의미의 이름임)

import React from 'react';

import {StyleSheet,View} from 'react-native';

function FeedsScreen(){

    return <View style = {StyleSheet.block}/>;

}

const sytles = StyleSheet.create({

    block:{},

});

export default FeedsScreen;

(5) MainTab.js ( 하단 탭 네비게이션)

//하단 탭

import React from 'react';

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

//하단 탭 안에 넣을 스크린들 삽입

import FeedsScreen from './FeedsScreen';

import Icon from 'react-native-vector-icons/MaterialIcons';

const Tab = createBottomTabNavigator();

function MainTab(){

    return(

        <Tab.Navigator

            tabBarOptions = {{

                showLabel:false,

                activeTintColor:"black",

            }}>

            <Tab.Screen name="Feeds"

            component={FeedsScreen}

            options={{

                tabBarIcon: ({color,size}) =>(

                    <Icon name="view-stream" size={size} color={color}/>

                ),

            }}

            />

        </Tab.Navigator>

    );

}

export default MainTab;

<Tab.Navigator

            tabBarOptions = {{

                showLabel:false,

                activeTintColor:"black",

            }}>

            <Tab.Screen name="Feeds"

            component={FeedsScreen}

            options={{

                tabBarIcon: ({color,size}) =>(

                    <Icon name="view-stream" size={size} color={color}/>

                ),

            }}

            />

        </Tab.Navigator>

-------> 이 부분을 복붙하여 각 스크린에 맞게 변형하면 됨