Định tuyến dựa trên tệp là một kỹ thuật phát triển web phổ biến ánh xạ đường dẫn URL tới một tệp cụ thể trong thư mục dự án. Hệ thống này tránh các cấu hình định tuyến phức tạp liên quan đến hệ thống định vị tòa nhà.
Với việc phát hành thư viện Bộ định tuyến Expo, có thể định tuyến dựa trên tệp với các ứng dụng React Native. Bộ định tuyến Expo có thể là một hệ thống điều hướng tốt hơn cho các nhà phát triển React Native làm việc với Expo.
Điều hướng được mô phỏng lại với bộ định tuyến Expo
Bộ định tuyến expo cung cấp giải pháp định tuyến khai báo cho các ứng dụng React Native Expo. Hệ thống này khác biệt đáng kể so với cách bạn xây dựng hệ thống điều hướng bằng cách sử dụng React Navigation. Bộ định tuyến Expo có mối quan tâm lớn với việc sử dụng hệ thống điều hướng đang hoạt động hiện tại.
Những vấn đề này bao gồm việc có một hệ thống điều hướng không hoạt động ổn định ở mọi nơi, khó khăn trong việc quản lý liên kết sâu và cả các thiết lập phức tạp cho quá trình chuyển đổi điều hướng tùy chỉnh.
Điều hướng/định tuyến dựa trên tệp của bộ định tuyến expo là một hệ thống đơn giản hoạt động tốt và đã quen thuộc với các nhà phát triển JavaScript và các khung JavaScript như Next.js, nơi bạn có thể xác định các tuyến.
Cài đặt và Thiết lập Bộ định tuyến Expo
Khá đơn giản để di chuyển dự án Expo của bạn từ hệ thống điều hướng cũ sang sử dụng bộ định tuyến Expo.
Bước 1: Cài đặt Bộ định tuyến Expo
Sử dụng lệnh đầu cuối này để chạy trình cài đặt bộ định tuyến expo:
npx expo install expo-router
Bạn cũng sẽ cần đảm bảo rằng bạn đã cài đặt các phụ thuộc ngang hàng này:
- Reac-igen-safe-area-context
- màn hình phản ứng gốc
- liên kết triển lãm
- expo-thanh trạng thái
- phản ứng-gốc-cử chỉ-xử lý
Nếu thiếu bất kỳ thứ gì, bạn có thể cài đặt chúng bằng cách chạy:
npx expo install <dependency-name>
Bước 2: Cập nhật điểm đầu vào
Tạo một cái mới index.js tập tin để thay thế hiện tại của bạn App.js điểm vào và đặt index.js làm điểm vào của ứng dụng bên trong app.json:
{
"main": "index.js"
}
import "expo-router/entry";
Bước 3: Xác định lược đồ liên kết sâu
Bộ định tuyến Expo sử dụng sơ đồ liên kết sâu để xác định màn hình hoặc nội dung nào sẽ mở khi định tuyến.
Xác định sơ đồ liên kết sâu cho ứng dụng của bạn bằng cách thêm một cơ chế tài sản để app.json:
{
"expo": {
"scheme": "myapp"
}
}
Bước 4: Cấu hình cuối cùng
Bước cuối cùng là thiết lập gói metro cho ứng dụng Expo của bạn và định cấu hình Babel để hỗ trợ Bộ định tuyến Expo trong ứng dụng của bạn.
Bên trong babel.config.js sửa đổi mã hiện có để trông như thế này:
module.exports = function (api) {
api.cache(true); return {
presets: ["babel-preset-expo"],
plugins: [
require.resolve("expo-router/babel"),
],
};
};
Bây giờ hãy xây dựng lại và khởi động ứng dụng của bạn bằng cách chạy:
npx expo --clear
Xây dựng các tuyến ứng dụng của bạn với bộ định tuyến Expo
Bạn có thể bắt đầu thiết lập luồng điều hướng trong ứng dụng thư mục. Các index.js tập tin là điểm bắt đầu của bạn. Bộ định tuyến Expo thêm đường dẫn của mọi tệp bạn tạo bên trong ứng dụng đến hệ thống định tuyến của ứng dụng với các liên kết sâu URL để khớp với từng trang.
Ví dụ: tạo một Thứ haiScreen.js tập tin bên trong ứng dụng thư mục và xuất một thành phần mặc định:
import { StyleSheet, Text, View } from "react-native";
import React from "react";const SecondScreen = () => {
return (
<View style={styles.container}>
<View style={styles.textStyle}>
<Text>Second Screen</Text>
</View>
</View>
);
};
export default SecondScreen;
const styles = StyleSheet.create({});
Bạn có thể điều hướng đến màn hình này từ index.js với sử dụngRouter() phương pháp:
import { useRouter } from "expo-router";export default function Page() {
const navigation = useRouter();
return (
<View style={styles.container}>
<Text style={styles.title}>Hello World</Text>
<Text style={styles.subtitle}>This is the first page of your app.</Text>
<Button
title="Navigate to SecondScreen"
onPress={() => {
navigation.push("/SecondScreen");
}}
/>
</View>
);
}
Tại đây, bạn chỉ định bộ định tuyến để điều hướng và sử dụng nó bên trong phần tử Nút bằng cách gọi navigation.push(“/second”). Đối số trong push là đường dẫn tệp của màn hình mà bạn muốn điều hướng đến.
Bên trong Màn hình thứ hai bạn cũng có thể điều hướng đến màn hình chỉ mục như thế này:
import { Link } from "expo-router";const SecondScreen = () => {
return (
<View style={styles.container}>
<View style={styles.textStyle}>
<Text>Second Screen</Text>
<Link href="https://www.makeuseof.com/" asChild>
<TouchableOpacity>
<Text>Navigate to index.js</Text>
</TouchableOpacity>
</Link>
</View>
</View>
);
};
Phần tử liên kết lấy một href prop để chỉ định đường dẫn. Bên trong ứng dụng, các “/” đường dẫn tương ứng với tệp mục nhập (index.js). Chỗ dựa thứ hai là asChild. Chỗ dựa này cho phép bạn kết xuất một thành phần con đầu tiên với tất cả các đạo cụ được chỉ định thay vì thành phần Liên kết mặc định. Bạn có thể sử dụng điều này để tùy chỉnh giao diện của thành phần Liên kết hoặc để triển khai logic định tuyến tùy chỉnh.
Xác định tuyến đường động
Với Các tuyến động, bạn có thể tạo các tuyến động dựa trên các tham số hoặc dữ liệu nhất định. Thay vì xác định một nhóm tuyến đường cố định, bạn có được sự linh hoạt và khả năng thích ứng trong điều hướng ứng dụng của mình.
Để bắt đầu sử dụng các tuyến động trong Bộ định tuyến Expo, bạn cần xác định các tuyến để xử lý nội dung động. Bạn có thể sử dụng các tuyến được tham số hóa bằng cách chỉ định các trình giữ chỗ trong đường dẫn của tuyến. Các giá trị cho các trình giữ chỗ này sau đó sẽ có sẵn cho tuyến đường của bạn khi ai đó điều hướng đến nó.
Ví dụ: hãy xem xét một ứng dụng viết blog nơi bạn muốn hiển thị các bài đăng trên blog riêng lẻ. Bạn có thể xác định một lộ trình động để xử lý từng bài đăng trên blog:
import React from "react";
import { useRouter } from "expo-router";const BlogPost = ({ route }) => {
const { postId } = route.params;
return (
<View>
<Text>Displaying Blog Post with ID: {postId}</Text>
</View>
);
};
export default BlogPost;
Trong ví dụ này, bạn định nghĩa một thành phần định tuyến động có tên Bài viết trên blog. Các tuyến đường.params đối tượng cho phép bạn truy cập các giá trị tham số được truyền cho tuyến đường. Trong trường hợp này, bạn đang truy cập một postId tham số để hiển thị bài đăng blog tương ứng.
Tạo các tuyến đường động
Bây giờ bạn đã xác định tuyến đường động, bạn có thể tạo tuyến đường động dựa trên dữ liệu hoặc đầu vào của người dùng. Chẳng hạn, nếu bạn có một danh sách các bài đăng trên blog được tìm nạp từ một API, thì bạn có thể tự động tạo các tuyến đường cho từng bài đăng trên blog.
Đây là một ví dụ:
import React from "react";
import { useNavigation } from "expo-router";const BlogList = ({ blogPosts }) => {
const navigation = useNavigation();
const navigateToBlogPost = (postId) => {
navigation.navigate("BlogPost", { postId });
};
return (
<View>
{blogPosts.map((post) => (
<TouchableOpacity
key={post.id}
onPress={() => navigateToBlogPost(post.id)}
>
<Text>{post.title}</Text>
</TouchableOpacity>
))}
</View>
);
};
export default BlogList;
Trong ví dụ này, bạn lặp qua bài đăng trên blog mảng và kết xuất một
Xử lý các tuyến đường động
Bạn có thể nghe các sự kiện điều hướng dành riêng cho một tuyến đường động bằng cách sử dụng sử dụngFocusEffect cái móc.
Ví dụ:
import React from "react";
import { Route, useFocusEffect } from "expo-router";const BlogPost = ({ route }) => {
const { postId } = route.params;
useFocusEffect(() => {
});
return (
<View>
<Text>Displaying Blog Post with ID: {postId}</Text>
</View>
);
};
export default BlogPost;
Trong ví dụ này, các sử dụngFocusEffect hook lắng nghe các sự kiện tiêu điểm dành riêng cho Bài viết trên blog thành phần. Bên trong cuộc gọi lại, bạn có thể tìm nạp dữ liệu bổ sung, thực hiện hành động hoặc cập nhật màn hình dựa trên bài đăng blog tập trung.
Điều hướng với các tuyến đường động
Để điều hướng đến một tuyến đường động, bạn có thể sử dụng các phương thức điều hướng do Bộ định tuyến Expo cung cấp.
Ví dụ: để điều hướng đến Bài viết trên blog thành phần với một cụ thể postIdbạn có thể dùng điều hướng.navigate phương pháp:
import React from "react";
import { useNavigation } from "expo-router";const BlogList = ({ blogPosts }) => {
const navigation = useNavigation();
const navigateToBlogPost = (postId) => {
navigation.navigate("BlogPost", { postId });
};
return (
<View>
{blogPosts.map((post) => (
<TouchableOpacity
key={post.id}
onPress={() => navigateToBlogPost(post.id)}
>
<Text>{post.title}</Text>
</TouchableOpacity>
))}
</View>
);
};
export default BlogList;
Khi bạn nhấn một bài đăng trên blog, điều hướng tớiBlogPost chức năng sẽ kích hoạt với postId.
Bộ định tuyến Expo giúp bạn cấu trúc các ứng dụng gốc của mình
Bộ định tuyến Expo cung cấp giải pháp tuyệt vời để quản lý điều hướng trong ứng dụng React Native của bạn. Bằng cách tưởng tượng lại trải nghiệm định tuyến gốc, Bộ định tuyến Expo mang đến sự linh hoạt và dễ sử dụng.
Bạn đã khám phá các tính năng của Expo Router, đi sâu vào các khái niệm định tuyến cơ bản và khám phá cách xây dựng các tuyến động. Với Bộ định tuyến Expo, bạn có thể tạo các luồng điều hướng động, xử lý dữ liệu khác nhau hoặc đầu vào của người dùng và cá nhân hóa điều hướng trong ứng dụng của bạn.
