네비게이션 예제 코드

RootstackParm 사용하여 screen 이동 할 수 있는 리스트를 구성 할 수있다.

export type RootStackParam = {
  Home: any;//class는 any로 해야 된다
  Screen:undefined;// 함수형은 undefined
};

Stack navigation을 사용하는 방법

const Stack = createNativeStackNavigator();// 네비게이터 생성

 function App() {
   return (
     <NavigationContainer>
       <Stack.Navigator initialRouteName="Home" screenOptions={{ headerShown: true }}>
         <Stack.Screen name="Home" component={HomeScreen} />
         <Stack.Screen name="Screen" component={TestScreen} />
       </Stack.Navigator>
	 </NavigationContainer>);
	}
export default App;

Bottom navigator를 사용하는 방법

const bottom = createBottomTabNavigator();
function App (){
  return(
    <NavigationContainer>
      <bottom.Navigator
       screenOptions={
        {
 			tabBarActiveTintColor: 'black',//  버튼이 눌렸을 때
         	tabBarInactiveTintColor: 'gray',// 버튼이 눌려지지 않았을 때
        }
      }>
      	<bottom.Screen name='TabA' component={TabA} options={{tabBarIcon:()=><AntDesign name="pluscircleo" size={24} color="black" />}}/>
        <bottom.Screen name='TabB' component={TAbB}/> // 옵션을 통해 아이콘 변경을 할 수 있다.
      </bottom.Navigator>
    </NavigationContainer>);
	}

export default App;

Nested navigation을 사용하는 방법

Root stack Navigator

export type RootStackParam = {
  TabA: any;
  TabB: undefined;
  Nested:undefined;
};

const Stack = createNativeStackNavigator();
 function App() {
  return (
   <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name='NestedBottomTab' component={BottomTabNavigiation}/>
      <Stack.Screen name='TabB' component={TabB}/>
    </Stack.Navigator>
   </NavigationContainer>
  )
}
export default App;

BottomTab Navigator

const BottomTab = createBottomTabNavigator();

export class BottomTabNavigiation extends React.Component{
    render(): React.ReactNode {
        return(
            <BottomTab.Navigator>
                <BottomTab.Screen name="TabA" component={TabA} />
                <BottomTab.Screen name="Nested" component={NestedStackNavigation} />
            </BottomTab.Navigator>    
        )
    }
}

Nested Navigatior

const Stack =  createNativeStackNavigator();

export class NestedStackNavigation extends React.Component{
render(): React.ReactNode {
  return(
    <Stack.Navigator>
        <Stack.Screen name="TabC" component={TabC}/>
    </Stack.Navigator>)
    }
}