RN Navigation / Tab Navigation

React Navigation

React Navigation은 React Native에서 navigation을 만드는데 독보적이다.

npm install @react-navigation/native

npx expo install react-native-screens react-native-safe-area-context

 

npx pod-install ios

아래 코드들을 android/app/src/main/java/<your package name>/MainActivity.java. 에 추가

create-react-native-app으로 프로젝트를 생성했으면 추가할 필요가 없다.

public class MainActivity extends ReactActivity {
  // ...
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(null);
  }
  // ...
}

 

 

import android.os.Bundle;

 

Tab Navigation

bottom-tabs navigation

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

npm install @react-navigation/bottom-tabs

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
    // 모든 스크린에는 이름이 있다.또한 컴포넌트도 있다.
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

 

import * as SplashScreen from "expo-splash-screen";
import {useFonts} from "expo-font";
import {Asset, useAssets} from "expo-asset";
import {Ionicons} from "@expo/vector-icons";
import {StatusBar} from "expo-status-bar";
import {useCallback, useEffect, useState} from "react";
import {Image, StyleSheet, Text, View} from "react-native";
import {NavigationContainer} from "@react-navigation/native";
import Tabs from "./navigation/Tabs";

export default function App() {
  const [ready, setReady] = useState(false);
  const [assets] = useAssets([
    require("./sky.jpg"),
    "https://blog.kakaocdn.net/dna/chdzI0/btqWU8aSuLk/AAAAAAAAAAAAAAAAAAAAAIfEz8Xsn-ZgISvRievor1l4l4_xl2Wkn0wbLCoBIKe-/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1751295599&allow_ip=&allow_referer=&signature=rxXSnoIA6sXC5iwvbunYznRDN6c%3D",
  ]);
  const [fontLoaded] = useFonts(Ionicons.font);
  useEffect(() => {
    async function prepare() {
      try {
        await SplashScreen.preventAutoHideAsync();
        await new Promise((resolve) => setTimeout(resolve, 3000));
      } catch (e) {
        console.warn(e);
      } finally {
        setReady(true);
      }
    }
    prepare();
  }, []);
  const onLayoutRootView = useCallback(async () => {
    if (ready) {
      await SplashScreen.hideAsync();
    }
  }, [ready]);

  if (!ready || !assets || !fontLoaded) {
    return null;
  }
  return (
    <NavigationContainer onReady={onLayoutRootView}>
      <Tabs />
    </NavigationContainer>
  );
}

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

 

Tab.Navigation Props

initialRouteName

initialRouteName은 첫번째로 렌더링될 route이다.

 

screenOptions

options으로는 많은 것들이 있다.

많은 것들을 option으로 만들려면 screenOption을 Tab.Navigator안에 사용해야한다. 

각각의 Screen에게는 options prop을 사용하면 된다.

const Tabs = () => (
  <Tab.Navigator
    initialRouteName="Search"
    screenOptions={{tabBarLabelStyle: {backgroundColor: "tomato"}}}
  >
    <Tab.Screen name="Movies" component={Movie}></Tab.Screen>
    <Tab.Screen
      name="Search"
      component={Search}
      options={{tabBarLabelStyle: {color: "green", fontSize: 20}}}
    ></Tab.Screen>
    <Tab.Screen name="TV" component={Tv}></Tab.Screen>
  </Tab.Navigator>
);
export default Tabs;

 

tabBarBadge

확인 안한 메세지 개수 뱃지 라고 생각하면 쉬움 문자열, boolean, null 도 반환됨

const Tabs = () => (
  <Tab.Navigator initialRouteName="Search">
    <Tab.Screen name="Movies" component={Movie}></Tab.Screen>
    <Tab.Screen
      name="Search"
      component={Search}
      options={{tabBarBadge: 5}}
    ></Tab.Screen>
    <Tab.Screen name="TV" component={Tv}></Tab.Screen>
  </Tab.Navigator>
);

tabBarActiveTintColor / tabBarInactiveTintColor

눌렀을때 활성화 색 / 비활성화 되었을 때 색

const Tabs = () => (
  <Tab.Navigator initialRouteName="Search">
    <Tab.Screen name="Movies" component={Movie}></Tab.Screen>
    <Tab.Screen
      name="Search"
      component={Search}
      options={{tabBarBadge: null, tabBarActiveTintColor: "#24aa31"}}
    ></Tab.Screen>
    <Tab.Screen name="TV" component={Tv}></Tab.Screen>
  </Tab.Navigator>
);