네비게이터 중첩 사용

여러 네비게이터들 중첩 사용 시의 특징

• https://reactnavigation.org/docs/nesting-navigators/

s-park 에서 사용해야 할 네비게이터

• 드로워 네비게이터

• 스택 네비게이터

소스코드

import 'react-native-gesture-handler'; //이거 필수라고 앞에서 말했다!
import * as React from 'react';
import { Button, View, StatusBar, StyleSheet } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';


const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

function Screen1({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="Screen2"
        onPress={() => navigation.navigate('Screen2')}
      />
    </View>
  );
}

function Screen2({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="Screen3"
        onPress={() => navigation.navigate('Screen3')}
      />
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

function Screen3({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

function MyStack() {
  return (
    <Stack.Navigator initialRouteName="Screen1">
      <Stack.Screen name="Screen1" component={Screen1} />
      <Stack.Screen name="Screen2" component={Screen2} />
      <Stack.Screen name="Screen3" component={Screen3} />
    </Stack.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator drawerStyle={{ backgroundColor: '#c6cbef', width: 240, }}>
        <Drawer.Screen name="Home" component={MyStack}/>
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container:{
    paddingTop:getStatusBarHeight(), flex:1
  },
});