Categories
REACT NAVIGATION

Xây dựng router React Native với React Navigation 5 (Phần 1)

Một ứng dụng mobile giống như một đoàn tàu, nó gồm nhiều toa tàu (màn hình) muốn tàu kết nối được với nhau thì phải có mắt xích. Hôm nay mình sẽ hướng dẫn các bạn làm một đoàn tàu React Native với React Navigation version 5 nhé.

Nhân tiện nói về tàu thì mình sẽ làm một ví dụ lấy chủ đề đường sắn Hà Nội (Hanoi Train Street) để làm một ứng dụng có đầy đủ:

  • Left Menu (Drawer)
  • Tabbar Bottom
  • Stack Navigation

Trước hết chúng ta cần phải tạo project bằng command line “react-native init HanoiTrainStreet”

Sau đó là cài đặt react-navigation:

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

Với phiên bản 0.60 React Native sẽ tự đông link nên bạn không cần chạy lệnh

react-native link

Nếu bạn dùng mac và đang chạy ứng dụng iOS giống mình thì chạy thêm lệnh này:

cd ios; pod install; cd ..

Sau khi React Native tạo ra project thì chúng ta sẽ tạo những folder đơn giản như sau:

  • src/source: Các files ảnh
  • src/screens: Các màn hình
  • src/router: Nơi ta quản lý các navigation

App.js sẽ trỏ đến AppContainer.js

import React from 'react';
import AppContainer from './src/router/AppContainer';

const App: () => React$Node = () => {
  return (
    <AppContainer />
  );
};

export default App;

AppContainer.js sẽ là nơi ta gói lại Left Menu (Drawer)

import { NavigationContainer } from '@react-navigation/native';
import React from 'react';
import DrawerHaNoiStation from './Drawer';

function AppContainer() {
    return (
      <NavigationContainer>
        <DrawerHaNoiStation />
      </NavigationContainer>
    );
  }

export default AppContainer;

Bên trong Drawer:

  • Screen 1 chúng ta để chính là cái Bottom Tab
  • Screen 2 sẽ là màn hình về Ha Noi Train Street
import { createDrawerNavigator } from '@react-navigation/drawer';
import * as React from 'react';
import HaNoiTrainStreet from '../screens/HaNoiTrainStreet';
import BottomTab from './BottomTab';

const Drawer = createDrawerNavigator();

export default function DrawerHaNoiStation() {
  return (
      <Drawer.Navigator initialRouteName="BottomTab">
        <Drawer.Screen name="BottomTab" component={BottomTab} />
        <Drawer.Screen name="HaNoiTrainStreet" component={HaNoiTrainStreet} />
      </Drawer.Navigator>
  );
}

Cuối cùng chính là bottom tab nơi ta có 2 màn hình Dark và Light

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import * as React from 'react';
import HaNoiStationDark from '../screens/HaNoiStationDark';
import HaNoiStationLight from '../screens/HaNoiStationLight';

const Tab = createBottomTabNavigator();

export default function BottomTab() {
    return (
        <Tab.Navigator>
            <Tab.Screen name="Station Dark" component={HaNoiStationDark} />
            <Tab.Screen name="Station Light" component={HaNoiStationLight} />
        </Tab.Navigator>
    );
}

Vậy là mình đã demo các chức năng cơ bản của React Navigation:

  • Drawer Navigation
  • Tabbar Navigation

Mình có vẽ thêm diagram cho anh em tham khảo:

Đây là một sample và mình sẽ tiếp tục bổ sung các phần khác và update trên github của mình các bạn có thể clone để chạy thử nhé:

Phần sau mình sẽ sửa lại UI của ứng dụng và demo thêm những tính năng hay ho khác của React Navigation nha. Cảm ơn mọi người đã đọc

Như mình đã nói ở bài giới thiệu hôm thứ 3 ngày 3 tháng 3 thì mình sẽ ra bài viết vào mỗi thứ 3 hàng tuần nhé:

1 reply on “Xây dựng router React Native với React Navigation 5 (Phần 1)”

Leave a Reply

Your email address will not be published. Required fields are marked *