React Navigation Part 1    

• Báo cáo

Bài đăng này đã không được cập nhật trong 2 năm

Mở đầu

Chắc hẳn quá trình chuyển màn hình trong quá trình phát triển ứng dụng React Native đã quá quen thuộc đối với các Dev chúng ta. Có rất nhiều thư viện hỗ trợ công việc này như  React Native Router Flux , React Router , React Native Navigation, nhưng các thư viện đều chưa thỏa mãn được yêu cầu của các lập trình viên

.

Hôm nay tôi xin giới thiệu đến các bạn React Navigation là thư viện rất được cộng đồng React Native tin tưởng và sử dụng vì sự đơn giản, dễ dùng và trải nghiệm tuyệt vời của nó.

Cài đặt

• Cài đặt package react-navigation

yarn add react-navigation
# or with npm
# npm install --save react-navigation

• Sau đó cài đặt react-native-gesture-handler. Nếu bạn đang sửu dụng  Expo managed workflow thì bạn không phải thực hiện bất cứ điều gì nữa vì nó có trong SDK.

yarn add react-native-gesture-handler
# or with npm
# npm install --save react-native-gesture-handler

• Link all native dependencies:

react-native link react-native-gesture-handler

Đối với iOs thì chúng ta không cần làm thêm bước nào nữa, còn với Android thì chúng ta cần thêm trong file MainActivity

package com.demoreactnavigation;

import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName[] {
        return "demoReactNavigation";
    }

    @Override
  protected ReactActivityDelegate createReactActivityDelegate[] {
    return new ReactActivityDelegate[this, getMainComponentName[]] {
      @Override
      protected ReactRootView createRootView[] {
        return new RNGestureHandlerEnabledRootView[MainActivity.this];
     }
    };
  }
}

Tạo Stack Navigator

• createStackNavigator là một hàm trả về một React Component và vì vậy mà chúng ta có thể export nó trực tiếp từ App.js và được sử dụng như là App's root component của chúng ta.
• Nó còn cung cấp một cách để ứng dụng của bạn chuyển đổi giữa các màn hình trong đó mỗi mãn hình mới được đặt trên cùng của ngăn xếp.  Cung cấp các animation chuyển màn hình giúp cho traỉ nghiệm giống như ở trên native.
• Hàm này gồm 2 tham số đầu vào là  RouteConfigs và StackNavigatorConfig

createStackNavigator[RouteConfigs, StackNavigatorConfig];

createStackNavigator[
  {
    Home: {
    // screen: là tham số dùng để định danh tên màn hình, có thể viết hoa hay viết thường
      screen: HomeScreen
       // When `HomeScreen` được load bởi StackNavigator, nó sẽ đưa ra `navigation` prop.

    // Mở rộng: Ghi đè hàm `navigationOptions` để setup các option cho màn hình như title,...
    navigationOptions: [{ navigation }] => [{
      title: `${navigation.state.params.name}'s Profile'`,
    }],
    },
  }

Gồm các tham số

initialRouteName:  dùng để setup màn hình mặc định của stack và phải trùng với khóa của 1 trong các route config

initialRouteParams: Param của initial route

defaultNavigationOptions: Những config mặc định để sử dụng cho màn hình.

Còn rất nhiều options các bạn có thể tham khảo thêm ở đây //reactnavigation.org/docs/en/stack-navigator.html#stacknavigatorconfig

title: Tên của màn hình

headerBackImage: icon của nút back

headerBackTitle: Text hiển thị trên navigation bar bên cạnh nút back

Còn nhiều options tùy mục đích sử dụng của các bạn để đưa ra lựa chọn thích hợp
//reactnavigation.org/docs/en/stack-navigator.html#navigationoptions-for-screens-inside-of-the-navigator

Navigate giữa các màn hình

import React from "react";
import { View, Text, Button } from "react-native";
import { createAppContainer, createStackNavigator } from "react-navigation"; // Version can be specified in package.json

// Tạo 2 màn hình để di chuyển

class HomeScreen extends React.Component {
  render[] {
    return [
      
        Home Screen
         {
            this.props.navigation.navigate["Details"];
          }}
        />
      
    ];
  }
}

class DetailsScreen extends React.Component {
  render[] {
    return [
      
        Details Screen
      
    ];
  }
}

// Tạo stack navigator chứa 2 màn hình là Home và Details

const AppNavigator = createStackNavigator[
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: [] => [{
        title: 'Home',
      }]
    },
    Details: {
      screen: DetailsScreen,
      navigationOptions: [] => [{
        title: 'Details',
      }]
    }
  },
  {
  // đặt màn hình mặc định xuất hiên là Home
    initialRouteName: "Home"
  }
];

export default createAppContainer[AppNavigator];

Khi chạy thành công thì sẽ xuất hiện màn hình

Khi click vào màn button Go To Details thì sẽ navigate tới màn hình Detail và khi nhấn nút back trên navigation bar thì sẽ trở lại màn hình Home.

Hoặc các bạn có thể tạo 1 button và set sự kiện onClick để quay lại màn hình trước

 this.props.navigation.goBack[]}
        />

Như vậy chúng ta đã chuyển màn hình thành công bằng cách sử dụng thư viện React Navigation. Ở bài sau mình sẽ giới thiệu sâu hơn về thư viện này. Cảm ơn các bạn đã theo dõi.

Tham khảo

//reactnavigation.org/en/