BÀI 9 - NAVIGATION TRONG REACT NATIVE

Video bài học

Tham khảo: here

  • Đầu tiên, tạo thêm thư mục Screens và các màn hình trong đó, như dưới này.

  • Main là nội dung từ App.js paste qua...

  • Trong thư mục dự án của bạn, cài đặt React Navigation như sau:

npm install @react-navigation/native

and

npm install @react-navigation/native-stack

Quản lý dự án bằng Expo thi thêm

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

or

npm install react-native-screens react-native-safe-area-context

  • Trong dependencies mà hiện như này là cài xong rồi.

  • Tiếp theo tạo một file ReactNavigation và code như dưới

import React from "react";

import { createStackNavigator } from '@react-navigation/stack';


import Main from './Screens/Main';

import ChiTiet from "./Screens/ChiTiet";


const ReactNavigatior = createStackNavigator({

Main: {

screen: Main

},

ChiTiet: {

screen: ChiTiet

}

});


export default ReactNavigatior;

  • Bài trước thì mình đã đỗ dữ liệu vào FlatList và bài này mình bổ sung thêm phương thức click item trong FlatList đó.