[React Native] [Bottom Navigator 화면 안에 Top Navigator 추가하기]

React Native 를 통해서 앱을 개발하다가 , 

 

Bottom Navigator 화면 안에다가 Top Navigator 를 집어넣고 싶다는 생각에 , 

스택 오버플로우나 , 슬랙등 여기저기 물어보다가 

 

알맞은 코드를  어떻게 구현하게 되었다. 

한번씩 가져다가 쓰는것도 좋을듯 (코드는 밑에 붙여놓았다)

 

참고 snack 링크 : https://snack.expo.dev/@aza1200/material-top-tabs-navigator-%7C-react-navigation

Material Top Tabs Navigator | React Navigation - Snack

참고했던 링크들 및 본인이 올렸던 게시글 링크 

1. 스택 오버플로우 (https://stackoverflow.com/questions/74780482/how-to-add-top-tabs-inside-the-bottom-tab-navigation)

2. 공식문서[top tab navigator] - ( https://reactnavigation.org/docs/material-top-tab-navigator/ )

3. https://shockoe.com/ideas/development/how-to-combine-bottom-tabs-top-tabs-and-a-hamburger-menu-in-a-react-native-application/

How to Combine Bottom Tabs, Top Tabs and a Hamburger Menu in a React Native Application | Shockoe

 

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

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

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


const TopTab = createMaterialTopTabNavigator();
const BottomTab = createBottomTabNavigator();

const TopTabNavigator = () => {
  return(
  <TopTab.Navigator >
    <TopTab.Screen name="Post Room" component={FeedScreen} />
    <TopTab.Screen name="Rooms" component={NotificationsScreen} />
  </TopTab.Navigator>
  )
}

export const App = () => {
  return (
    <NavigationContainer>
      <BottomTab.Navigator screenOptions={{headerShown: false}}>
        <TopTab.Screen name="Top Tabs will" component={TopTabNavigator} />
        <BottomTab.Screen name="Rooms" component={NotificationsScreen} />
      </BottomTab.Navigator>
    </NavigationContainer>
  )
}


export default App;