Cách xây dựng hệ thống điều hướng di động với React Navigation
Các ứng dụng dành cho thiết bị di động nên có một hệ thống điều hướng hướng dẫn người dùng dễ dàng thông qua các màn hình và chức năng khác nhau.
React Navigation, một thư viện điều hướng linh hoạt và mạnh mẽ dành cho React Native, có thể giúp bạn tạo ra trải nghiệm đó. Bằng cách khai thác các khả năng của nó, bạn có thể dễ dàng xây dựng một hệ thống định vị di động tuyệt vời.
Mục Lục
Cài đặt thư viện điều hướng React
Điều hướng React cung cấp ba mẫu điều hướng chính, đó là điều hướng Ngăn xếp, Tab và Ngăn kéo để xây dựng hệ thống điều hướng. Các mẫu điều hướng này cung cấp một khung để tổ chức và quản lý điều hướng giữa các màn hình khác nhau trong ứng dụng của bạn.
Để bắt đầu sử dụng React Navigation, hãy cài đặt thư viện và các phụ thuộc cần thiết của nó:
npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context
Thiết lập Bộ điều hướng
Mỗi bộ điều hướng trong React Navigation sống trong thư viện riêng của nó. Để sử dụng bất kỳ bộ điều hướng nào, bạn sẽ phải cài đặt chúng riêng lẻ.
Cấu trúc dự án được cân nhắc kỹ lưỡng sẽ hữu ích khi xây dựng hệ thống điều hướng cho ứng dụng dành cho thiết bị di động của bạn. Một thực hành tốt là tạo ra một src thư mục trong thư mục gốc của dự án của bạn. Trong thư mục này, bạn nên có một màn hình thư mục. Điều này sẽ phục vụ để tách các thành phần màn hình của bạn khỏi các thành phần khác.
Bạn sẽ viết mã để thiết lập mẫu điều hướng mà bạn đang sử dụng bên trong dự án của mình. App.js tài liệu.
Tạo một Navigator bên trong App.js file là phương pháp hay nhất vì một số lý do:
- Các App.js tệp thường là thành phần cấp cao nhất trong ứng dụng React Native. Việc xác định Bộ điều hướng trong tệp này sẽ đảm bảo rằng hệ thống phân cấp điều hướng ở cấp cao nhất của cây thành phần của bạn và có thể truy cập xuyên suốt.
- Đặt Bộ điều hướng trong App.js tệp cho phép bạn dễ dàng truy cập và chuyển trạng thái trên toàn ứng dụng cũng như các đạo cụ tới các màn hình trong bộ điều hướng.
- Điều hướng phản ứng Điều hướngContainer cung cấp bối cảnh cần thiết cho điều hướng và thường nằm bên trong App.js. Bằng cách đặt Bộ điều hướng trong cùng một tệp, bạn có thể dễ dàng tích hợp nó với Điều hướngContainer.
Bộ điều hướng ngăn xếp
Stack Navigator là mẫu điều hướng phổ biến nhất trong thư viện React Navigation. Nó sử dụng cấu trúc dữ liệu ngăn xếp trong đó mỗi màn hình là một thành phần hoàn toàn khác và được xếp chồng lên màn hình trước đó.
Khi một màn hình mới được đẩy lên trên cùng của ngăn xếp, nó sẽ trở thành màn hình hoạt động và màn hình trước đó được ném xuống bên dưới nó. Điều này cho phép người dùng điều hướng qua lại trong ngăn xếp, giống như luồng điều hướng của trang web. Bạn có thể thiết lập bộ điều hướng ngăn xếp để chuyển từ màn hình này sang màn hình khác.
Ví dụ:
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
Khối mã trên tạo thành phần Bộ điều hướng ngăn xếp bằng cách sử dụng tạoStackNavigator() từ thư viện điều hướng.
Trong ví dụ này, Stack Navigator có hai màn hình: Trang chủ Và Chi tiết.
Bây giờ hãy cài đặt Trình điều hướng ngăn xếp:
npm install @react-navigation/stack
Bên trong Màn hình chínhbạn có thể dùng dẫn đường đối tượng để kiểm tra Bộ điều hướng ngăn xếp:
import { StyleSheet, View, Button } from "react-native";
import React from "react";const HomeScreen = ({ navigation }) => {
return (
<View>
<Button
title="Navigate to .."
onPress={() => navigation.navigate("DetailScreen")}
/>
</View>
);
};
export default HomeScreen;
const styles = StyleSheet.create({});
Lưu ý cách Trình điều hướng ngăn xếp tự động tạo nút mũi tên để xử lý điều hướng quay lại màn hình trước đó.
Trình điều hướng tab
Trong một số trường hợp, việc có một hệ thống điều hướng qua lại như Stack Navigator không mang lại trải nghiệm tuyệt vời. Tab Navigator phù hợp hơn cho những trường hợp này. Nó hiển thị các màn hình điều hướng có sẵn cho người dùng và có thể dễ sử dụng hơn, giống như một thanh điều hướng trên web.
Để bắt đầu, hãy cài đặt @react-navigation/bottom-tabs thư viện bằng trình quản lý gói NPM.
Với tạoBottomNavigator()bạn có thể tạo một phiên bản của Trình điều hướng tab như bạn đã làm với Trình điều hướng ngăn xếp:
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';const Tab = createBottomTabNavigator();
Và sau đó, xác định màn hình bạn muốn dưới dạng các tab trong trình điều hướng và Điều hướngContainer:
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen
name="Home"
component={HomeScreen}
options={{ title: "Home" }}
/>
<Tab.Screen
name="Profile"
component={ProfileScreen}
options={{ title: "Profile" }}
/>
<Tab.Screen
name="Details"
component={DetailScreen}
options={{ title: "Details" }}
/>
</Tab.Navigator>
</NavigationContainer>
);
}
Khi chạy ứng dụng của mình, bạn sẽ thấy Trình điều hướng tab với các màn hình đã xác định của bạn ở dưới cùng.
Bạn có thể sử dụng tabBarPosition option để định vị hoa tiêu tại đứng đầu, Phải, bên tráihoặc đáy (mặc định).
Điều hướng ngăn kéo
Bộ điều hướng ngăn kéo hoặc ngăn kéo là một mẫu điều hướng phổ biến trong các ứng dụng dành cho thiết bị di động. Bạn có thể mở các ngăn kéo bằng cách vuốt hoặc chạm vào một nút. Điều này khiến ngăn kéo trượt vào từ bên cạnh màn hình, để lộ nội dung của nó.
Để sử dụng Drawer Navigator, hãy cài đặt nó cùng với phản ứng-gốc-cử chỉ-xử lý Và phản ứng tự nhiên-reanimated:
npm install @react-navigation/drawer
npm install react-native-gesture-handler react-native-reanimated
Bạn cũng sẽ cần định cấu hình reanimated bên trong babel.config.js tài liệu:
module.exports = {
presets: ["babel-preset-expo"],
plugins: ["react-native-reanimated/plugin"],
};
Dưới đây là ví dụ về cách thiết lập Bộ điều hướng ngăn kéo:
import "react-native-gesture-handler"; import { View, Text, Button } from "react-native";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { NavigationContainer } from "@react-navigation/native";
const Drawer = createDrawerNavigator();
const DrawerContent = ({ navigation }) => {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text style={{ fontSize: 24, fontWeight: "bold" }}>
Welcome to the Drawer
</Text>
<Text>
This is some extra content that you can display in the drawer.
</Text>
<Button title="Close Drawer" onPress={() => navigation.closeDrawer()} />
</View>
);
};
const App = () => (
<NavigationContainer>
<Drawer.Navigator
initialRouteName="Home"
drawerContent={(props) => <DrawerContent {...props} />}
>
{}
</Drawer.Navigator>
</NavigationContainer>
);
export default App;
Trong ví dụ này, các Ngăn kéoNội dung thành phần được thông qua như là ngăn kéoNội dung chống đỡ tạoDrawerNavigator. Bên trong Ngăn kéoNội dung thành phần, bạn có thể tùy chỉnh nội dung để hiển thị thông tin mong muốn bằng cách sử dụng thành phần văn bản hoặc bất kỳ thành phần và kiểu dáng nào khác.
Trình điều hướng tab là tĩnh và luôn hiển thị. Điều này không phải lúc nào cũng là tốt nhất vì các tab chặn các phần của màn hình và có thể làm mất tiêu điểm khỏi màn hình chính. Bạn có thể sử dụng ngăn kéo làm trình điều hướng tab động và tạo menu điều hướng trong ngăn kéo. Sau đó, người dùng có thể mở ngăn kéo để tìm menu điều hướng.
Bạn cũng có thể sử dụng ngăn kéo để hiển thị nội dung bổ sung như thanh tìm kiếm, hồ sơ người dùng, thông tin theo ngữ cảnh hoặc bất kỳ nội dung nào không yêu cầu chế độ xem toàn màn hình.
Hãy xem xét các phương pháp hay nhất này để tận dụng tối đa Trình điều hướng ngăn kéo:
- Tránh làm choáng ngợp ngăn kéo với quá nhiều tùy chọn và tập trung vào việc trình bày các tính năng có liên quan và được sử dụng thường xuyên nhất.
- Phân loại các mục liên quan một cách hợp lý và trực quan để giúp người dùng nhanh chóng tìm thấy những gì họ đang tìm kiếm.
- Sử dụng các biểu tượng hoặc chỉ báo trực quan để giúp người dùng hiểu mục đích của từng mục trong ngăn kéo.
Truyền dữ liệu với đạo cụ điều hướng
React Navigation cung cấp một cơ chế mạnh mẽ cho phép bạn truyền dữ liệu thông qua các đạo cụ điều hướng.
Hãy xem xét một tình huống trong đó bạn có một danh sách các mục trên một màn hình và khi người dùng chọn một mục, bạn muốn chuyển dữ liệu tương ứng sang một màn hình khác.
Trước tiên, bạn cần xác định cấu trúc điều hướng của mình. Bây giờ, để truyền dữ liệu từ Màn hình chính đến một Màn hình chi tiết khi một mục được chọn, bên trong Màn hình chính xác định chức năng xử lý điều hướng và bao gồm dữ liệu bạn muốn chuyển.
import React from 'react';
import { View, Text, Button } from 'react-native';const HomeScreen = ({ navigation }) => {
const handleItemPress = (item) => {
navigation.navigate('DetailScreen', { item });
};
return (
<View>
<Text>List of Items</Text>
<Button title="Item 1" onPress={() => handleItemPress('Item 1 Data')} />
<Button title="Item 2" onPress={() => handleItemPress('Item 2 Data')} />
</View>
);
};
export default HomeScreen;
Các xử lýItemPress chức năng sử dụng các điều hướng.navigate phương pháp điều hướng đến Màn hình chi tiết trong khi chuyển dữ liệu mục đã chọn làm tham số trong đối số thứ hai.
Để có thể truy cập dữ liệu đã truyền bên trong Màn hình chi tiết thành phần, bạn sẽ cần dẫn đường chỗ dựa:
import React from 'react';
import { View, Text } from 'react-native';const DetailScreen = ({ navigation }) => {
const item = navigation.getParam('item', '');
return (
<View>
<Text>Detail Screen</Text>
<Text>{item}</Text>
</View>
);
};
export default DetailScreen;
Ở đây, Màn hình chi tiết thành phần sử dụng điều hướng.getParam để truy xuất mục đã chuyển từ đạo cụ điều hướng. Trong ví dụ này, giá trị mặc định của một chuỗi trống được đặt trong trường hợp không có dữ liệu. Bằng cách này, ứng dụng của bạn sẽ không gặp sự cố khi hiển thị.
Tùy thuộc vào mức độ phức tạp của ứng dụng, bạn có thể khám phá việc sử dụng các thư viện quản lý trạng thái như Redux hoặc API ngữ cảnh để quản lý và chia sẻ dữ liệu trên toàn cầu.
Sắp xếp mã điều hướng của bạn
Tổ chức mã điều hướng của bạn đúng cách sẽ giúp bạn xây dựng một ứng dụng React Native có thể mở rộng và cộng tác. Bạn có thể làm điều này bằng cách chia logic điều hướng thành các mô-đun có thể quản lý được. Điều này sẽ làm cho nó dễ đọc và dễ hiểu.
Với điều này, bạn có thể chắc chắn tạo điều hướng liền mạch cho người dùng của mình trong khi tận hưởng trải nghiệm phát triển.