React-navigation là thư viện điều hướng xuất hiện trong đầu tôi khi chúng ta nói về điều hướng trong React Native.
Tôi là một fan hâm mộ lớn của thư viện này và nó luôn là giải pháp đầu tiên tôi sử dụng để xử lý điều hướng trong React Native. Điều này một phần là do nó có một API tuyệt vời và dễ dàng và rất có thể tùy chỉnh.
Tôi đang viết bài này vì phiên bản 5 vừa mới chuyển từ phiên bản beta sang ổn định. Nó đi kèm với một số thay đổi về tính năng và thiết kế API mới cung cấp một cách đơn giản và khác biệt để khai báo các tuyến.
Trong bài viết này, chúng ta sẽ đi qua các API mới và xem xét các cách sử dụng chúng trong các ứng dụng của chúng tôi.
Được xuất bản lần đầu trên saidhayani.com
Đang cài đặt
Cách bạn cài đặt điều hướng phản ứng đã thay đổi một chút so với các phiên bản trước (> 4.x):
// > 4.x verions
yarn add react-navigation
Cài đặt react-navigation 5 sẽ giống như sau:
// yarn
yarn add @react-navigation/native
// npm
npm install @react-navigation/native
Các phiên bản mới nhất của điều hướng phản ứng sử dụng nhiều thư viện của bên thứ ba như trình xử lý cử chỉ phản ứng để tạo hoạt ảnh và xử lý chuyển tiếp. Vì vậy, bạn luôn cần cài đặt các thư viện đó.
// yarn
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
// npm
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
Màn hình động
API mới giới thiệu tính năng động trong việc khởi tạo các tuyến đường. Trước đây, nó được thực hiện tĩnh - về cơ bản, chúng ta phải xác định các Routes của mình trong một tệp cấu hình.
// @flow
import React from "react";
import { createAppContainer, createSwitchNavigator } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
/** ---------Screens----------- */
// import LaunchScreen from "../Containers/LaunchScreen";
import HomeScreen from "../Containers/HomeScreen";
import ProfileScreen from "../Containers/ProfileScreen";
import LoginScreen from "../Containers/LoginScreen";
const StackNavigator = createStackNavigator(
{
initialRouteName: "Home"
},
{
Home: {
screen: HomeScreen
},
Login: {
screen: LoginScreen,
headerMode: "none",
},
Profile: {
screen: ProfileScreen
}
);
export default createAppContainer(StackNavigator);
API mới đi kèm với các thành phần động. và làm cho điều hướng trở nên năng động hơn.
Cách khai báo Routes mới sẽ giống như sau.
import React from "react"
import { SafeAreaView, StyleSheet, View, Text, StatusBar } from "react-native"
import { NavigationContainer } from "@react-navigation/native"
import { createStackNavigator } from "@react-navigation/stack"
const App: () => React$Node = () => {
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView style={styles.containerStyle}>
<AppNavigation />
</SafeAreaView>
</>
)
}
const Stack = createStackNavigator()
const AppNavigation = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="home">
<Stack.Screen name="home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
)
}
const HomeScreen = () => {
return (
<View style={styles.containerStyle}>
<Text style={styles.title}>Home Screen</Text>
</View>
)
}
Cách mới này năng động, dễ sử dụng hơn và tương tự như API bộ định tuyến phản ứng.
Tùy chọn động
Đây là tính năng được cộng đồng yêu cầu nhiều nhất trong một thời gian dài. Tôi luôn gặp vấn đề với phương thức cũ (tĩnh) và thật khó để thay đổi hành vi điều hướng động.
Phương pháp cũ => <4.x
Với các phiên bản cũ hơn của điều hướng phản ứng, chúng tôi phải xác định các tùy chọn tĩnh. Và không có cách nào để thay đổi động này.
static navigationOptions = {
title: "Sign In",
header: null,
mode: "modal",
headerMode: "none"
};
Phương pháp mới (phiên bản 5)
React-navigation đi kèm với một phương thức động khá đơn giản. Chúng tôi có thể đặt các tùy chọn cho bất kỳ màn hình nào chỉ bằng props .
const AppNavigation = ({}) => {
let auth = {
authenticated: true,
user: {
email: "user@mail.com",
username: "John",
},
}
let ProfileScreenTitle = auth.authenticated ? auth.user.username : "Profile"
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen
name="Profile"
component={ProfileScreen}
options={{
title: ProfileScreenTitle,
headerTintColor: "#4aa3ba",
headerStyle: {
backgroundColor: darkModeOn ? "#000" : "#fff",
},
}}
/>
<Stack.Screen name="About" component={AboutScreen} />
</Stack.Navigator>
</NavigationContainer>
)
}
Với các tùy chọn động, tôi có thể thay đổi tiêu đề dựa trên xác thực. Ví dụ:nếu người dùng được xác thực, tôi có thể đặt tiêu đề màn hình thành tên người dùng của người dùng hoặc tôi có thể thay đổi màu nền cho tiêu đề.
Điều này hữu ích hơn, đặc biệt nếu bạn đang sử dụng các chủ đề động hoặc nếu bạn sẵn sàng triển khai chế độ tối trong ứng dụng của mình.
Móc
Đây là tính năng yêu thích của tôi cho đến nay và nó tiết kiệm thời gian. API mới đã giới thiệu một số móc tùy chỉnh để thực hiện các hành động nhất định.
Trong các phiên bản trước, chẳng hạn, nếu tôi phải lấy Tên hiện tại của màn hình đang hoạt động, tôi phải tạo một số trợ giúp để thực hiện việc đó cho tôi khá giống như sau.
export function getCurrentRouteName(): string | null {
const tag = "[getCurrentRouteNameSync] "
const navState = getStore().getState().nav
const currentRoute = getActiveRouteState(navState)
console.log(tag + " currentRoute > ", currentRoute)
return currentRoute && currentRoute.routeName ? currentRoute.routeName : null
}
API hooks giúp tôi tránh tất cả những điều này và giúp tôi truy cập API điều hướng dễ dàng hơn với một dòng duy nhất sử dụng hook.
Bây giờ tôi có thể dễ dàng lấy RouteName bằng useRoute Móc.
import { useRoute } from "@react-navigation/native"
const AboutScreen = ({ navigation }) => {
const route = useRoute()
return (
<View
style={{
justifyContent: "space-around",
flex: 1,
alignItems: "center",
}}
>
{/* Display the RouteName here */}
<Text style={styles.title}>{route.name}</Text>
</View>
)
}
Chúng ta có thể làm điều tương tự với useNavigationState Cái móc. Nó cung cấp cho chúng tôi quyền truy cập vào trạng thái điều hướng.
const navigationState = useNavigationState(state => state)
let index = navigationState.index
let routes = navigationState.routes.length
console.log(index)
console.log(routes)
React-navigation cũng cung cấp các hook khác, ví dụ:
-
useFocuseEffect:một móc hiệu ứng phụ, khi các màn hình được tải, sẽ trả về màn hình được lấy nét -
useLinking:xử lý deepLinking
Tôi thực sự khuyên bạn nên xem chúng.
Kết thúc
API điều hướng phản ứng mới chắc chắn chuyển từ tĩnh sang động. Đó là một hướng đi tuyệt vời sẽ thay đổi hoàn toàn cách chúng tôi xử lý điều hướng trong React Native. Các tuyến đường động là một yêu cầu chính của người dùng điều hướng phản ứng và cách mới này sẽ giúp chúng tôi tạo ra trải nghiệm điều hướng người dùng tốt hơn.
Bạn có thể tìm thêm nội dung về React Native tại đây
Cảm ơn đã đọc
- GitHub
- Tham gia danh sách thư
Tìm kiếm một nhà phát triển React Native cho dự án của bạn? Đánh tôi lên .