[React Native] React Native Navigation

Install

$ npm install react-native-gesture-handler 
$ npm install @react-navigation/stack 
$ npm install @react-navigation/native
$ npm install react-native-safe-area-context 
$ npm install react-native-reanimated 
$ npm install @react-native-community/masked-view

 

App or Root

react-native-gesture-handler 를 import

 

import 'react-native-gesture-handler';

function App() {
  return (
     <View></View>
  );
}

export default App;

 

Stack.Screen

CreateStackNavigator 를 이용
Stack.Screen 을 이용하여 component 노출

import React from 'react';
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { SafeAreaProvider } from 'react-native-safe-area-context';

import HomeScreen from './screens/home';
import CategoryScreen form './screens/category';
import SettingScreen from './screens/setting';

const Stack = createStackNavigator();
function App() {
  return (
    <SafeAreaProvider>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="home">
        	<Stack.Screen name="home" component={HomeScreen} />
            <Stack.Screen name="category" component={CategoryScreen} />
          	<Stack.Screen name="setting" component={SettingScreen} />          	          
        </Stack.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  );
}
export default App;

 

 

Move Page

NavigationContainer 로 감싸져있으면 Props로 Navigation 객체가 전달됨

import React from 'react';
import { View, Button } from 'react-native';

function SettingScreen({navigation}) {
  const moveToHome = () => {
    navigation.push('home');
  };
  return (
    <View>
    	<Button title="홈으로" onPress={moveToHome} />
    </View>
  );
}
export default SettingScreen;

 

SafeAreaView

view가 상단과 하단 영역 침범을 방지하는 역할

import {SafeAreaView} from 'react-native-safe-area-context';

function App() {
  return (
    	<SafeAreaView>
        
        	//...
        
        </SafeAreaView>
    )
}