Cách điều hướng giữa các màn hình trong ứng dụng gốc React

Thông thường, khi xây dựng ứng dụng React Native, bạn sẽ soạn ứng dụng đó từ các màn hình khác nhau như Đăng nhập, Trang chủ và Giới thiệu. Sau đó, bạn sẽ cần triển khai cơ chế điều hướng để người dùng của bạn có thể điều hướng ứng dụng và truy cập các màn hình riêng lẻ của ứng dụng theo đúng thứ tự.

Mục đích của hướng dẫn này là hướng dẫn bạn quy trình thiết lập hệ thống điều hướng trong ứng dụng React Native của bạn. Điều này bao gồm cài đặt thư viện, thêm màn hình của bạn vào bộ điều hướng ngăn xếp và kết nối các màn hình với nhau từ bên trong từng thành phần của bạn.

Trước khi bắt đầu

Để làm theo hướng dẫn này trên máy tính cục bộ của bạn, bạn cần cài đặt như sau:

Để biết hướng dẫn từng bước về cách thiết lập môi trường phát triển React Native, bạn có thể đọc React Native chính thức tài liệu thiết lập.

Trước khi bạn bắt đầu xem cách triển khai điều hướng trong ứng dụng React Native của chúng ta, hãy hiểu cơ chế điều hướng ngăn xếp hoạt động như thế nào trong React Native.

Hiểu cách hoạt động của điều hướng ngăn xếp

Hãy tưởng tượng rằng ứng dụng React Native của bạn là một ngăn xếp. Ban đầu, trên ngăn xếp đó, bạn có Trang chủđây là màn hình đầu tiên hiển thị khi bạn mở ứng dụng.

Nếu bạn đã điều hướng đến Về màn hình từ Trang chủ màn hình, ứng dụng sẽ đẩy Về vào ngăn xếp, vì vậy nó nằm trên cùng của Trang chủ. Tương tự, ứng dụng đẩy mọi màn hình mới mà bạn điều hướng đến vào ngăn xếp.

Bây giờ, nếu bạn muốn quay lại màn hình trước đó, ứng dụng sẽ bật màn hình hiện tại của bạn khỏi ngăn xếp và hiển thị cho bạn màn hình bên dưới nó. Hành vi này tương tự như những gì xảy ra khi bạn nhấp vào biểu tượng “quay lại” trong trình duyệt web của mình.

Với sự hiểu biết rõ ràng về cơ chế điều hướng ngăn xếp, giờ là lúc thiết lập nó trong ứng dụng React Native.

1. Cài đặt React Navigation cho các ứng dụng gốc

Để bắt đầu, hãy cài đặt Gói điều hướng phản ứng cho các ứng dụng gốc trong dự án React Native của bạn bằng cách thực hiện lệnh này trên thiết bị đầu cuối:

 npm i @react-navigation/native 

Gói bạn vừa cài đặt yêu cầu Phản ứng ngăn xếp bản địa Và Phản ứng màn hình gốc để chạy đúng. Để cài đặt RN Stack, hãy chạy:

 npm i @react-navigation/native-stack 

Để cài đặt cái thứ hai, hãy chạy cái này:

 npm i react-native-screens 

Bây giờ bạn đã có mọi thứ cần thiết để bắt đầu tạo cơ chế điều hướng trong ứng dụng của mình. Bước tiếp theo là thiết lập màn hình.

2. Thiết lập màn hình trong ứng dụng gốc React của bạn

Đối với ví dụ này, chúng ta sẽ chỉ tạo hai màn hình — màn hình chính và màn hình giới thiệu.

Tạo một thư mục có tên màn hình bên trong thư mục gốc của ứng dụng của bạn. Sau đó, tạo hai tệp có tên HomeScreen.js và AboutScreen.js trong thư mục màn hình.

Cần thêm gì vào tệp HomeScreen.js của bạn

Mở tệp HomeScreen.js và bắt đầu bằng cách nhập thông tin sau:

 import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import { useState } from 'react'
 

Tiếp theo, tạo thành phần chức năng HomeScreen và truy cập đối tượng điều hướng bằng cách sử dụng giải cấu trúc đối tượng (theo các phương pháp hay nhất của React), sau đó trả lại tiêu đề và nút để điều hướng đến màn hình giới thiệu:

 export default function HomeScreen({navigation}) { 
  return ( 
    <View style={styles.container}> 
      <Text style={styles.paragraph}> Home Screen </Text> 
      <Button 
        title="Go to About" 
        onPress={() => navigation.navigate('AboutScreen')} 
      /> 
    </View> 
  );
}
 

Ở đây chúng ta đang yêu cầu React Native điều hướng đến Về khi người dùng nhấn nút. Trong trường hợp này, chúng ta sẽ không chuyển bất kỳ dữ liệu nào tới màn hình. Nhưng giả sử bạn muốn truyền dữ liệu vào hàm; đây là cách bạn muốn làm như vậy:

 export default function HomeScreen({navigation}) { 
  const data = { websiteName: "John's Tech" }
  return ( 
    <View style={styles.container}> 
      
      <Button 
        title="Go to About" 
        onPress={() => navigation.navigate('AboutScreen', data)} 
      /> 
    </View> 
  );
}
 

Bây giờ khi bạn nhấn nút, mã này sẽ chuyển dữ liệu sang màn hình tiếp theo, Về. Bên trong AboutScreen.js tệp, bạn có thể truy cập dữ liệu từ tuyến đường và hiển thị nó trên giao diện người dùng.

Thêm gì vào tệp AboutScreen.js của bạn

Mở tệp AboutScreen.js và bắt đầu bằng cách nhập các phụ thuộc sau:

 import * as React from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
 

Tiếp theo, tạo các Giới thiệu về màn hình thành phần chức năng lấy dữ liệu từ tuyến đường.params thuộc tính và trả về dữ liệu trong giao diện người dùng:

 export default function AboutScreen({route}) { 
  let dataObj = route.params
  return ( 
    <View style={styles.container}> 
      <Text style={styles.paragraph}> 
        This is the About Screen of {dataObj.websiteName} 
      </Text> 
    </View> 
  );
}
 

Nếu bạn nhớ lại, chúng ta đã chỉ định một thuộc tính duy nhất trong đối tượng dữ liệu có tên tên trang webmà bây giờ chúng ta kết xuất bên trong thành phần. Bạn có thể thêm bao nhiêu thuộc tính tùy thích vào đối tượng và truy cập chúng bên trong thành phần màn hình đích.

Bước tiếp theo là thiết lập trình điều hướng ngăn xếp của chúng ta với hai màn hình.

3. Kết nối các màn hình với Bộ điều hướng ngăn xếp

Bên trong App.js, hãy bắt đầu bằng cách nhập các phụ thuộc sau:

 import * as React from 'react';
import HomeScreen from './screens/HomeScreen'
import AboutScreen from './screens/AboutScreen'
import { NavigationContainer } from "@react-navigation/native"
import { createNativeStackNavigator } from "@react-navigation/native-stack"
 

Ở dòng hai và ba, chúng ta đã nhập hai màn hình mà chúng ta vừa tạo. Sau đó, chúng ta nhập khẩu Điều hướngContainer

từ @react-navigation/gốc Và tạoNativeStackNavigator từ @react-navigation/native-stack để giúp chúng ta kết nối các màn hình.

Tiếp theo, gọi tạoNativeStackNavigator để truy xuất Stack:

 const Stack = createNativeStackNavigator()
 

Điều này cho phép chúng ta “xếp chồng” các màn hình mà bạn muốn chuyển đổi giữa các màn hình đó trong ứng dụng của mình.

Tạo chức năng thành phần Ứng dụng và trả về cả hai màn hình trong như hình bên dưới. Hãy chắc chắn để bọc nó trong hoặc nó sẽ không hoạt động:

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

Mã này đặt màn hình HomeScreen lên trên cùng của ngăn xếp, nghĩa là ứng dụng sẽ hiển thị thành phần Home trước khi tải xong.

Bây giờ mọi thứ đã được thiết lập. Bạn có thể kiểm tra ứng dụng bằng cách nhấp vào Chuyển đến Giới thiệu trên giao diện người dùng Home. Điều này sẽ chuyển hướng bạn đến Vềvà bạn sẽ tìm thấy tên trang web thuộc tính được hiển thị trong giao diện người dùng:

Điều tuyệt vời nhất khi sử dụng Điều hướng React cho Bản địa là nó rất dễ cài đặt và sử dụng. Nó không yêu cầu bất kỳ cấu hình bổ sung nào (ngoài các thư viện cần thiết mà bạn đã cài đặt) và bạn cũng có thể kết nối các loại Paywall khác nhau (nếu bạn định tạo ứng dụng dựa trên đăng ký).

Tìm hiểu thêm về React Native

React Native là một khung đa nền tảng để tạo các ứng dụng chạy trên thiết bị Android và iOS. Có rất nhiều điều để tìm hiểu về React Native và nếu bạn chưa quen với việc sử dụng khung này, bạn nên bắt đầu bằng cách tìm hiểu những điều cơ bản.