React-native Navigation

이번에는 React-native로 사용할 수 있는 네비게이션 바에 대해서 알아봅니다.  

 

자세한 레퍼런스 웹 페이지는 아래에

 

https://reactnavigation.org/docs/getting-started

https://reactnavigation.org/docs/getting-started/

# 설치

npm install @react-navigation/native
npx expo install react-native-screens react-native-safe-area-context

# 추가설치 : create-react-native-app을 사용하지 않았으면 아래의 명령어도 실행

npm install react-native-screens react-native-safe-area-context

# Android

 - MainActivity.java 내용 추가 : 이것도 create-react-native-app을 사용하면 자동으로 추가 되는듯 

 - 파일위치 : android/app/src/main/java/<your package name>/MainActivity.jav

import android.os.Bundle;

@Override protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(null);
}

# IOS

npx pod-install ios

일단 이렇게 먼저 셋팅을 하고.. 다음은... 

 

# Bottom Tabs Navigator : 화면 하단에 나타날 네비게이션 바 

 

역시 더 자세한 설명은 아래의 공식 웹 페이지에서 확인.. 

 

https://reactnavigation.org/docs/bottom-tab-navigator

https://reactnavigation.org/docs/bottom-tab-navigator/

# 설치

npm install @react-navigation/bottom-tabs

# 네비게이션 구현

## 순서는... 

 1. 네비게이션을 담을 Tabs.js 파일을 만들어 클릭하면 이동될 항목들을 만들어 준다.
 2. 네비게이션에 들어갈 항목에 해당하는 화면들을 만든다. 
 3. App.js 에 1번에서 만든 Tabs.js 를 랜더링 한다 .

생각보단.. 쉽다.... ? ^^;;

# Tabs.js

import React from "react";
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Search from "./Search"

const Tab = createBottomTabNavigator();

const Tabs = () => (
    <Tab.Navigator initialRouteName="Search" 
        screenOptions={{
            // 여기에 작성하면 하위 모든 탭에 적용 됨
        }}
        <Tab Screen name="" />
        <Tab Screen name="" />
        <Tab.Screen name="Search" component={Search} 
            options={{
                // 여기에 작성하면 해당 탭에만 적용 됨
            }}/>
    </Tab.Navigator>
)

export default Tabs;

 - initialRouteName : 앱이 시작될때 제일 먼저 보여주는 탭을 설정 할수 있음 
 - screenOptions 
   : 모든 탭에 적용 하는 옵션을 사용. Tab.Navigator 태그 안에서 사용 
 - options
   : 하위 각 탭에 적용할 수 있는 옵션. 각 탭에 사용하면 됨

 

# Search.js

import React from "react";
import {View, Text} from "react-native";
const Search = () => {
    <View style={{flex:1, justfyContent: "center", alignItems: "center">
        <Text>Search</Text>
    </View>
}

export default Search;

# App.js

.... 
import Tabs from "./Tabs"
return <NavigationContainer>
    <Tabs />
</NavigationContainer>

 - navigator을 랜더링 하려면 먼저 NavigationContainer 라는 것을 랜더링 해야 한다.

 

코딩 결과 화면은 아래와 같이 나온다.

Bottom Tab Navigation 적용

오늘은 여기까지~~!!!