RN Prj - React Navigation

- 어제 스타벅스 조명이 약해 책읽다가 눈이 금방 피로해져서

오늘은 등 있는 동네 커피숍으로 마실 왔네요 ㅋㅋ

- 어제는 React Native API Core Component 들을 따라해봤고,

오늘은 React Navigation 을 만들어보겠습니다

https://reactnavigation.org/docs/navigating

React Navigation

$ npm install @react-navigation/native

$ expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

$ npm install @react-navigation/stack

- project 의 base UI 가 될 bottom Navigation 도 만들어보겠습니다 : Nesting navigators

$ npm install @react-navigation/bottom-tabs

연습 코드는 stack navigation 에 bottom tab navigation 을 짬뽕

이런 UI 로 구성

 

// In App.js in a new project

import * as React from 'react';
import { Button, View, StyleSheet, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>

  );
}

function ExtraScreen() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreenBottom} />
      <Tab.Screen name="Settings" component={SettingsScreenBottom} />
    </Tab.Navigator>
  );
}

function DetailsScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Details... again"
        onPress={() => navigation.push('Details')}
      />
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go back" onPress={() => navigation.goBack()} />
      <Button title="Go Extra Screen" onPress={() => navigation.navigate('Extra')} />
      <Button
        title="Go back to first screen in stack"
        onPress={() => navigation.popToTop()}
      />
    </View>
  );
}
const Stack = createStackNavigator();

function HomeScreenBottom() {
  return (
    <View style={styles.container}>
      <Text>Home!</Text>
    </View>
  );
}
function SettingsScreenBottom() {
  return (
    <View style={styles.container}>
      <Text>Settings!!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();


function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: 'First Page' }}
      />
      <Stack.Screen 
        name="Details" 
        component={DetailsScreen}
        options={{ title: 'Second Page' }} 
      />
      <Stack.Screen
        name="Extra"
        component={ExtraScreen}
        options={{title:'Third Page'}}
      />
      </Stack.Navigator>

    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems:'center',
    justifyContent:'center',
  },
});

export default App;