RN Navigation series. Part II.React navigation v5

Đây chắc chắn không phải là bản navigation cuối cùng của react-navigation, vì cũng như các thư viện khác, react-navigation cũng phải thích ứng theo các phiên bản của react-native, cùng với sự đóng góp không ngừng nghỉ của cộng đồng open-source trên toàn thế giới. Tuy nhiên theo cá nhân tôi, v5 thực sự như một phiên bản Premium với nhiều nâng cấp đáng giá, nhiều chắt lọc tinh tuý mà chúng ta - cộng đồng developer, freelancer, các doanh nghiệp,… rất may mắn được trải nghiệm, sử dụng hoàn toàn free. Các bạn đừng tiếc vote cho react-navigation trên Github nhé, đường link https://github.com/react-navigation/react-navigation

Team react-navigation có các bài blog để nói về các nâng cấp trên v5 này:

https://reactnavigation.org/blog/2020/02/06/react-navigation-5.0.html

Ở đây, tôi xin được điểm qua các tính năng nổi bật ở v5 này:

• Các tuỳ chỉnh, cấu hình dựa trên Component:

Nếu như với các phiên bản trước, react-navigation mang lại khả năng custom rất cao, thì với bản v5 này, level custom được đẩy lên một tầm cao mới. Bây giờ bạn đã có thể truy cập được props, state, context, configuration, … khi khai báo Navigation cũng như trong các màn, điều này giúp cập nhật UI, business logic cực mạnh mẽ.

• Bộ Hooks cho Navigation (phải nói là tôi thực sự rất hào hứng với bộ Hooks mới này)

• Cập nhật tuỳ biến cho Navigation từ Component

• Bộ API theme

• Native Stack Navigator

• Tích hợp Redux DevTools

Bây giờ thì triển khai nào. Vì chúng ta sẽ mô phỏng lại Navigation của v4 ở phần trước, nên tôi bỏ qua đoạn giới thiệu app và diagram navigation structure

1. Import thư viện và các màn:

import React from 'react'
import { Dimensions } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import IonIcon from 'react-native-vector-icons/Ionicons'
import { Home, Shopping, Ranking, Profile, HomeDetail } from '../../Components'
import CustomDrawer from '../navigators/Drawer'

2. Truy cập phương thức của từng loại Navigation thông qua các hàm createStackNavigator, createBottomtabNavigator, createDrawerNavigator

const Stack = createStackNavigator()
const Tab = createBottomTabNavigator()
const Drawer = createDrawerNavigator()

function Navigator() {
 const renderIconName = routeName => {
 switch (routeName) {
 case 'Home':
 return 'ios-home'
 case 'Shopping':
 return 'md-basket'
 case 'Ranking':
 return 'ios-flame'
 case 'Profile':
 return 'ios-glasses'
 default:
 break
 }
 }  

 function CommonStack(name, component) {
 return (
 <Stack.Screen name={name} component={component} />
 )
 }

3. Tạo HomeStack, ShoppingStack, RankingStack, ProfileStack, TabNavigator, DrawerNavigator.

Dành một chút thời gian để quan sát, các bạn có thể thấy cách tạo Navigation ở đây có sự khác biệt hoàn toàn với v4. Toàn bộ đều theo hướng Component, các options như headerMode, screenOptions hay tabBarOptions đều chuyển thành dạng truyền props.

function HomeStack () {
 return (
 <Stack.Navigator headerMode='none'>
 {CommonStack('Home', Home)}
 {CommonStack('HomeDetail', HomeDetail)}
 </Stack.Navigator>
 )
 }

 function ShoppingStack () {
 return (
 <Stack.Navigator headerMode='none'>
 {CommonStack('Shopping', Shopping)}
 </Stack.Navigator>
 )
 }


 function RankingStack () {
 return (
 <Stack.Navigator headerMode='none'>
 {CommonStack('Ranking', Ranking)}
 </Stack.Navigator>
 )
 }

 function ProfileStack () {
 return (
 <Stack.Navigator headerMode='none'>
 {CommonStack('Profile', Profile)}
 </Stack.Navigator>
 )
 }

3. Ngoài việc chuyển đổi thành dạng Component và tuỳ chỉnh options theo dạng truyền props thì cách custom Icon cho BottomTabBar cũng không có thay đổi nhiều, đều render tab name, màu mè và hình dạng icon ăn theo tên của từng tab và activeTinColor, inactiveTinColor.

function MainTab(name, component) {
 return (
 <Tab.Screen name={name} component={component} />
 )
 }
 function TabNavigator () {
 return (
 <Tab.Navigator
 screenOptions={({ route }) => ({
 tabBarIcon: ({ color }) => {
 const { name } = route
 let iconName = renderIconName(name)
 return <IonIcon name={iconName} size={22} color={color} />
 }
 })}
 tabBarOptions={{
 activeTintColor: '#EB5757',
 inactiveTintColor: '#888'
 }}
 >
 {MainTab('Home', HomeStack)}
 {MainTab('Shopping', ShoppingStack)}
 {MainTab('Ranking', RankingStack)}
 {MainTab('Profile', ProfileStack)}
 </Tab.Navigator>
 )
 }

4. Truyền Custom Drawer có hơi chút khác biệt, đó là chúng ta phải trực tiếp gán toàn bộ props của DrawerNavigator vào trong cho CustomDrawer, nếu không thì CustomDrawer sẽ không thể gọi được toggleDrawer cũng như các phương thức khác.

function DrawerNavigator () {
 const width = Dimensions.get('window').width / 1.5
 return (
 <Drawer.Navigator
 drawerContent={props => <CustomDrawer {...props} />}
 drawerStyle={{ width }}
 >
 <Drawer.Screen name='Home' component={TabNavigator} />
 </Drawer.Navigator>
 )
 }

5. Ở đây chúng ta không có AppStack, mà bản thân Functional Component này đã là AppStack rồi, vì thế return NavigationContainer ngay tại đây, sau đó export Component để dùng ở App.js

return (
 <NavigationContainer>
 <Stack.Navigator headerMode='none'>
 <Drawer.Screen name='Home' component={DrawerNavigator} />
 </Stack.Navigator>
 </NavigationContainer>
)
}
export default Navigator

6. Cuối cùng mở App.js lên và import Navigation vào, phần này thì giống hệt với react-navigation v4:

import Navigator from './src/app/navigators'
const App = () => {
 return (
 <View style={styles.container}>
 <Navigator />
 </View>
 )
}

Kết quả sẽ giống hệt với react-navigation v4. Congratulation!!!