Hướng dẫn về React Native Navigation

React NativeReact Native là một trong những khung phát triển ứng dụng đa nền tảng phổ biến nhất. Sử dụng JavaScript, bạn có thể phát triển các ứng dụng gốc cho cả Android và iOS.

Một phần quan trọng của việc tạo ứng dụng là có thể điều hướng giữa các màn hình. Trong hướng dẫn này, bạn sẽ học cách sử dụng React NavigationReact Navigation. trong ứng dụng của mình để thêm điều hướng. Điều này sẽ bao gồm điều hướng cơ bản từ màn hình này sang màn hình khác, quay lại màn hình trước đó, chuyển các tham số, nghe các sự kiện và hơn thế nữa.

Hướng dẫn này sẽ không giải thích những điều cơ bản về cách tạo một ứng dụng React Native. Nếu bạn muốn tìm hiểu về điều đó, bạn có thể xem hướng dẫn khác của tôi Hướng dẫn về React Native Tutorial: Create Your First AppReact Native: Tạo ứng dụng đầu tiên của bạn. .

Bạn có thể tìm thấy mã cho hướng dẫn this GitHub repositorynày trên kho lưu trữ GitHub này. .

Prerequisites Điều kiện tiên quyết

Đảm bảo rằng bạn đã cài đặt cả Node.jsNode.js và NPM trên máy tính của mình. Bạn có thể kiểm tra xem chúng đã được cài đặt hay chưa bằng lệnh sau:

node -v
npm -v

Nếu chúng chưa được cài đặt, bạn có thể install Node.js và NPM sẽ được cài đặt tự động với nó.

 Sau đó, hãy đảm bảo rằng bạn cài đặt CLI của ExpoExpo's CLI nếu bạn chưa cài đặt nó:

npm install -g expo-cli

Nếu bạn không quen với Expo là gì, Expo cung cấp một bộ công cụ được xây dựng xung quanh React. Quan trọng nhất, nó cho phép bạn viết và xây dựng ứng dụng React Native của mình trong vài phút.

Bạn cũng nên cài đặt Expo GoExpo Go trên thiết bị của mình để có thể kiểm tra ứng dụng khi chúng tôi xem qua hướng dẫn.

Project SetupThiết lập dự án

Bắt đầu bằng cách tạo một dự án React Native mới bằng cách sử dụng CLI của Expo:

expo init react-navigation-tutorial —npm

Sau đó, bạn sẽ được nhắc chọn loại ứng dụng, chọn "trống".

Sau đó, init  lệnh sẽ cài đặt các phụ thuộc bạn cần cho dự án React Native của mình.

au khi hoàn tất, hãy thay đổi thư mục của dự án:

cd react-navigation-tutorial

Bây giờ, bạn sẽ cài đặt các phụ thuộc cần thiết để sử dụng React Navigation. Đầu tiên, cài đặt thư viện khối xây dựng bằng CLI của Expo bằng lệnh sau:

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

Thứ hai, cài đặt thư viện điều hướng ngăn xếp gốc:

npm install @react-navigation/native-stack

Bây giờ, bạn có tất cả các thư viện cần thiết để bắt đầu sử dụng React Navigation.

Cuối cùng, cài đặt React Native PaperReact Native Paper để có các thành phần được tạo kiểu đẹp mắt trong ứng dụng của bạn:

npm install react-native-paper

Set Up React Navigation - Thiết lập Điều hướng React

rước khi có thể bắt đầu thêm các tuyến đường vào ứng dụng của mình, bạn cần tạo Bộ điều hướng ngăn xếp. Trình điều hướng ngăn xếp này sẽ được sử dụng để tạo màn hình và điều hướng giữa chúng.

Trong App.js, thay đổi nội dung thành như sau:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Provider as PaperProvider } from 'react-native-paper';
import HomeScreen from './screens/HomeScreen';

const Stack = createNativeStackNavigator()

export default function App() {
  return (
    <PaperProvider>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={HomeScreen} />
        </Stack.Navigator>
    </NavigationContainer>
    </PaperProvider>
  );
}

Lưu ý rằng trong giá trị trả về của App,, trước tiên bạn có <PaperProvider> .ở trên cùng của các phần tử. Điều này chỉ được sử dụng để đảm bảo tất cả các màn hình chia sẻ cùng một chủ đề.

Tiếp theo, bạn có <NavigationContainer>. Thành phần này quản lý cây điều hướng và chứa trạng thái điều hướng. Vì vậy, nó sẽ bao bọc các bộ điều hướng Stack.

 Bên trong <NavigationContainer>  bạn có <Stack.Navigator>. . Stack iđược tạo bằng cách sử dụng createNativeStackNavigator. Hàm này trả về một đối tượng chứa 2 thuộc tính: Screen and và Navigator.

Thuộc Navigator  tính là một phần tử React và nó nên được sử dụng để bao bọc các Screen .phần tử để quản lý cấu hình định tuyến.

 Vì vậy, bên trong <Stack.Navigator> e bạn sẽ có một hoặc nhiều <Stack.Screen>  thành phần. Đối với mỗi tuyến đường, bạn sẽ có một <Stack.Screen> component. Bây giờ, bạn chỉ có một thành phần trỏ đến Home route.tuyến đường.

 Lưu ý rằng một Screenthành phần lấy phần name prop, hỗ trợ, là tên của tuyến đường và sẽ được tham chiếu sau này khi điều hướng đến tuyến đường này và thuộc component property which is the component to render for this route.tính là thành phần sẽ hiển thị cho tuyến đường này.

Như bạn có thể thấy, bạn đang chuyển HomeScreen  thành phần cho Home route, so you need to create it now.tuyến đường, vì vậy bạn cần tạo nó ngay bây giờ.

Tạo thư mục screens, và bên trong thư mục đó tạo một tệp mới HomeScreen.js với nội dung sau:

import React from 'react';
import { ScrollView, StyleSheet } from 'react-native';
import { Button, Card } from 'react-native-paper';
import { DefaultTheme } from 'react-native-paper';

function HomeScreen () {
  return (
    <ScrollView style={styles.scrollView}>
      <Card style={styles.card}>
        <Card.Title title="Home Screen" />
      </Card>
    </ScrollView>
  )
}

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: DefaultTheme.colors.background,
    paddingTop: 10
  },
  card: {
    width: '90%',
    marginLeft: 'auto',
    marginRight: 'auto'
  }
});

export default HomeScreen

Trong thiết bị đầu cuối của bạn, hãy chạy để khởi động ứng dụng của bạn:

npm start