Bài 6 : Navigation trong React Native

  • Di chuyển giữa các màn hình trong React native

Nếu các em đã code Android hoặc iOS thì không hề xa lạ với khái niệm quản lý màn hình, di chuyển qua lại giữa các màn hình với nhau.

Trong bài viết này, Thầy sẽ giới thiệu với các em về Navigation trong lập trình React Native.

Navigation là 1 thư viện mở rộng cho React Native dùng để quản lý , di chuyển, gửi nhận tham số giữa các màn hình với nhau. Chúng ta phải cài đặt thêm để có thể sử dụng thư viện này bằng câu lệnh sau :

npm install --save react-navigation

Lưu ý : gõ câu lệnh cài đặt khi cmd đang ở trong thư mục dự án nhé.

Sau khi cài đặt thành công, các em có thể tạo 1 navigation cơ bản bằng ví dụ sau trong file App.js

import {createStackNavigator, createAppContainer} from 'react-navigation';

const MainNavigator = createStackNavigator({
  Home: {screen: HomeScreen},
  Profile: {screen: ProfileScreen},
});

const App = createAppContainer(MainNavigator);

export default App;

Trong tình huống chương trình báo lỗi createStackNavigation not found. Chúng ta cần cài đặt lại, sau đó chạy lại project bằng câu lệnh expo start nhé

Trong ví dụ, chúng ta cần lưu ý các thành phần sau :

createStackNavigator : đối tượng dùng để khai báo array các màn hình
createAppContainer : đối tượng dùng để chứa các createStackNavigator

Mỗi màn hình trong createStackNavigator cần phải kế thừa React.Component và khai báo export default
Navigation cũng cung cấp hàm để chúng ta chỉnh sửa Header Bargửi nhận tham số giữa các màn hình

export default class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const {navigate} = this.props.navigation;
    return (
      <Button
        title="Go to Jane's profile"
        onPress={() => navigate('Profile', {name: 'Jane'})}
      />
    );
  }
}

Trong màn hình HomeScreen các em lưu ý các câu lệnh sau :
const {navigate} = this.props.navigation; : câu lệnh khởi tạo biến navigate để di chuyển màn hình
navigate(‘Profile’, {name: ‘Jane’}) : câu lệnh di chuyển tới màn hình Profile và gửi kèm tham số name có giá trị là Jane, giá trị ‘Profile’ là giá trị được khai báo trong array màn hình đã khai báo bên App.js (createStackNavigator)

Như vậy sau ví dụ trên, chúng ta có thể dễ dàng thêm, di chuyển qua lại giữa các màn hình thông qua React Native Navigation. Bằng việc sử dụng các Native Component (tạm gọi là sử dụng code của nền tảng thuần như Android, iOS) mà các hiệu ứng đạt được 60fps (60 khung hình trên giây) nên chúng ta có thể thấy các hiệu ứng trượt, mở màn hình chạy rất mượt mà.

React Native Navigation cũng cung cấp các giải pháp để chúng ta chỉnh sửa, tuỳ biến hiệu ứng (Animations). Các em có thể tham khảo thêm tại đây

  • Tùy biến giao diện Header Bar


Thiết lập tiêu đề cho màn hình
  static navigationOptions = {
    title: 'Tiêu đề',
  };

React Native cung cấp các thuộc tính để tùy biến giao diện cho Header Bar thông qua navigationOptions. Chúng ta có thể thiết lập 1 số giao diện cơ bản sau :

1. Thiết lập header : null để ẩn hoàn toàn Header bar
Tùy biến màu hình nền bằng headerStyle
màu nút back bằng headerTintColor và
headerTitleStyle để tùy biến kiểu chữ cho tiêu đề
Tùy biến nút bên phải của Header Bar với thuộc tính headerRight
  • Truyền tham số giữa 2 màn hình

Để gửi và nhận tham số giữa 2 màn hình ta viết code như ví dụ sau :

export default class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const {navigate} = this.props.navigation;
    return (
      <Button
        title="Go to Jane's profile"
        onPress={() => navigate('Profile', {name: 'Jane'})}
      />
    );
  }
}

Để nhận dữ liệu, tại màn hình Profile, ta viết code như sau :

class DetailsScreen extends React.Component {
  render() {
    /* 2. Get the param, provide a fallback value if not available */
    const { navigation } = this.props;
    const itemId = navigation.getParam('name', 'NO-NAME');
   
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      </View>
    );
  }
}

Như vậy để gửi và nhận dữ liệu chúng ta sẽ làm việc với 2 câu lệnh :

this.props.navigation.navigate(‘Profile’, {name: ‘Jane’}) :
Profile : tên màn hình muốn chuyển tới
name : ‘Jane’ : là tên tham số và giá trị của tham số

this.props.navigation.getParam(‘name’, ‘NO-NAME’) :
name : là tên của tham số, giống với tham số được gửi đi từ màn hình Home
‘NO-NAME’ : là giá trị mặc định gán cho tham số name trong trường hợp ko lấy được dữ liệu
Lưu ý : trong tài liệu không đề cập tới dung lượng tối đa có thể truyền tải, tuy nhiên trong thực tế khi chúng ta truyền 1 biến String lớn sẽ khiển ứng dụng lag giật và trên 1 số dòng máy Android sẽ báo out of memory