Cách sử dụng Định tuyến với Điều hướng React trong React Native

React Navigation là một thư viện phổ biến để định tuyến và chuyển trong ứng dụng React Native .

---

Thư viện này giúp giải quyết vấn đề chuyển giữa nhiều màn hình và chia sẻ dữ liệu giữa chúng.

Ở cuối hướng dẫn này, bạn sẽ có một mạng xã hội thô sơ. Nó sẽ hiển thị số lượng kết nối mà user có và cung cấp cách kết nối với những người bạn khác. Bạn sẽ sử dụng ứng dụng mẫu này để khám phá cách chuyển màn hình ứng dụng di động bằng react-navigation .

Yêu cầu

Để hoàn thành hướng dẫn này, bạn cần :

• Môi trường phát triển local cho Node.js. Làm theo Cách cài đặt Node.js và Tạo môi trường phát triển local .
• Quen thuộc với việc cài đặt môi trường của bạn để tạo một dự án React Native mới và sử dụng trình mô phỏng iOS hoặc Android có thể có lợi.

Lưu ý: Nếu trước đây bạn đã làm việc với react-navigation , bạn có thể gặp một số khác biệt. Bạn có thể tham khảo tài liệu để biết hướng dẫn về cách di chuyển từ 3.x và di chuyển từ 4.x.

Hướng dẫn này đã được xác minh với Node v14.7.0, npm v6.14.7, react v16.13.1, react-native v0.63.2, @react-navigation/native v5.7.3, và @react-navigation/stack v5.9.0.

Bước 1 - Tạo một ứng dụng React Native mới

Đầu tiên, hãy tạo một ứng dụng React Native mới bằng lệnh lệnh sau vào terminal của bạn:

npx react-native init MySocialNetwork --version 0.63.2 

Sau đó, chuyển đến folder mới:

cd MySocialNetwork 

Và khởi động ứng dụng cho iOS:

npm run ios 

Ngoài ra, đối với Android:

npm run android 

Lưu ý: Nếu bạn gặp sự cố nào , bạn có thể cần tham khảo các vấn đề khắc phục sự cố cho React Native CLI .

Điều này sẽ tạo ra một dự án khung cho bạn. Nó không giống một mạng xã hội ngay bây giờ. Hãy khắc phục điều đó.

Mở App.js :

nano App.js 

Thay thế nội dung của App.js bằng mã sau để hiển thị thông báo chào mừng:

import React from 'react'; import { StyleSheet, Text, View } from 'react-native';  class App extends React.Component {   render() {     return (       <View style={styles.container}>         <Text>Welcome to MySocialNetwork!</Text>       </View>     );   } }  const styles = StyleSheet.create({   container: {     flex: 1,     backgroundColor: '#fff',     alignItems: 'center',     justifyContent: 'center',   }, });  export default App; 

Lưu các file . Bây giờ, khi bạn chạy ứng dụng, Chào mừng bạn đến với MySocialNetwork! thông báo sẽ xuất hiện trong trình mô phỏng của bạn.

Trong bước tiếp theo, bạn sẽ thêm nhiều màn hình hơn vào ứng dụng của bạn .

Bước 2 - Tạo HomeScreen và FriendsScreen

Hiện tại, bạn có một màn hình hiển thị thông báo chào mừng. Trong bước này, bạn sẽ tạo hai màn hình cho ứng dụng của bạn : HomeScreen và FriendsScreen .

HomeScreen

Ứng dụng của bạn cần có HomeScreen . Màn HomeScreen sẽ hiển thị số lượng bạn bè đã có trong mạng của bạn.

Lấy mã từ App.js và thêm nó vào một file mới có tên HomeScreen.js :

cp App.js HomeScreen.js 

Mở HomeScreen.js :

nano HomeScreen.js 

Sửa đổi HomeScreen.js để sử dụng HomeScreen thay vì App :

import React from 'react'; import { StyleSheet, Text, View } from 'react-native';  class HomeScreen extends React.Component {   render() {     return (       <View style={styles.container}>         <Text>You have (undefined) friends.</Text>       </View>     );   } }  // ...  export default HomeScreen; 

Mã này sẽ tạo ra Bạn có bạn bè (không xác định). tin nhắn giữ chỗ. Bạn sẽ cung cấp một giá trị sau.

FriendsScreen

Ứng dụng của bạn cũng cần có FriendsScreen . Trên FriendsScreen Bạn bè, bạn có thể thêm bạn mới.

Lấy mã từ App.js và thêm nó vào một file mới có tên FriendsScreen.js :

cp App.js FriendsScreen.js 

Mở FriendsScreen.js :

nano FriendsScreen.js 

Sửa đổi FriendsScreen.js để sử dụng FriendsScreen thay vì App :

import React from 'react'; import { StyleSheet, Text, View } from 'react-native';  class FriendsScreen extends React.Component {   render() {     return (       <View style={styles.container}>         <Text>Add friends here!</Text>       </View>     );   } }  // ...  export default FriendsScreen; 

Mã này sẽ tạo ra Thêm bạn bè ở đây! thông điệp.

Đến đây, bạn có HomeScreen và FriendsScreen . Tuy nhiên, không có cách nào để chuyển giữa chúng. Bạn sẽ xây dựng chức năng này trong bước tiếp theo.

Bước 3 - Sử dụng StackNavigator với React Navigation

Để chuyển giữa các màn hình, bạn sẽ sử dụng StackNavigator . StackNavigator hoạt động chính xác như một ngăn xếp cuộc gọi . Mỗi màn hình bạn chuyển đến được đẩy lên trên cùng của ngăn xếp. Mỗi lần bạn nhấn nút quay lại, màn hình sẽ bật ra khỏi đầu ngăn xếp.

Đầu tiên, hãy cài đặt @react-navigation/native :

npm install @react-navigation/native@5.7.3 

Sau đó, cài đặt @react-navigation/stack và các phụ thuộc ngang hàng của nó:

npm install @react-navigation/stack@5.9.0 @react-native-community/masked-view@0.1.10 react-native-screens@2.10.1 react-native-safe-area-context@3.1.4 react-native-gesture-handler@1.7.0 

Lưu ý: Nếu bạn đang phát triển cho iOS, bạn có thể cần chuyển đến folder ios và chạy pod install .

Tiếp theo, truy cập lại App.js :

nano App.js 

Thêm NavigationContainer và createStackNavigator vào App.js :

import 'react-native-gesture-handler'; import React from 'react'; import { StyleSheet } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack';  const Stack = createStackNavigator(); 

Sau đó, thay thế nội dung của render :

// ...  class App extends React.Component {   render() {     return (       <NavigationContainer>         <Stack.Navigator>         </Stack.Navigator>       </NavigationContainer>     );   } }  // ... 

Được lồng bên trong <Stack.Navigator> , thêm <Stack.Navigator> HomeScreen :

import 'react-native-gesture-handler'; import React from 'react'; import { StyleSheet } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import HomeScreen from './HomeScreen';  const Stack = createStackNavigator();  class App extends React.Component {   render() {     return (       <NavigationContainer>         <Stack.Navigator>           <Stack.Screen             name="Home"             component={HomeScreen}           />         </Stack.Navigator>       </NavigationContainer>     );   } }  // ... 

Mã này tạo ra một chồng rất nhỏ cho hoa tiêu của bạn chỉ với một màn hình: HomeScreen .

Được lồng vào bên trong <Stack.Navigator> , thêm FriendsScreen :

import 'react-native-gesture-handler'; import React from 'react'; import { StyleSheet } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import HomeScreen from './HomeScreen'; import FriendsScreen from './FriendsScreen';  const Stack = createStackNavigator();  class App extends React.Component {   render() {     return (       <NavigationContainer>         <Stack.Navigator>           <Stack.Screen             name="Home"             component={HomeScreen}           />           <Stack.Screen             name="Friends"             component={FriendsScreen}           />         </Stack.Navigator>       </NavigationContainer>     );   } }  // ... 

Mã này thêm FriendsScreen vào trình chuyển .

Lưu ý: Điều này khác với cách createStackNavigator được sử dụng trong các version trước của React Navigation.

Bây giờ, trình chuyển nhận biết được hai màn hình của bạn.

Thêm các node vào HomeScreen và FriendsScreen

Cuối cùng, thêm các node để đưa bạn giữa hai màn hình.

Trong HomeScreen.js , hãy thêm mã sau:

import React from 'react'; import { StyleSheet, Text, View, Button } from 'react-native';  class HomeScreen extends React.Component {   render() {     return (       <View style={styles.container}>         <Text>You have (undefined) friends.</Text>          <Button           title="Add some friends"           onPress={() =>             this.props.navigation.navigate('Friends')           }         />       </View>     );   } }  // ... 

Trong FriendsScreen.js , thêm mã sau:

import React from 'react'; import { StyleSheet, Text, View, Button } from 'react-native';  class FriendsScreen extends React.Component {   render() {     return (       <View style={styles.container}>         <Text>Add friends here!</Text>          <Button           title="Back to home"           onPress={() =>             this.props.navigation.navigate('Home')           }         />       </View>     );   } }  // ... 

Hãy nói về this.props.navigation . Miễn là màn hình của bạn có trong StackNavigator , nó sẽ tự động kế thừa nhiều đạo cụ hữu ích từ đối tượng navigation . Trong trường hợp này, bạn đã sử dụng navigate để chuyển sang một trang khác.

Nếu bạn mở trình mô phỏng ngay bây giờ, bạn có thể chuyển giữa HomeScreen và FriendsScreen .

Bước 4 - Sử dụng Context để chuyển dữ liệu sang các màn hình khác

Trong bước này, bạn sẽ tạo một loạt những người bạn có thể có - Alice , Bob và Sammy - và một mảng trống những người bạn hiện tại. Bạn cũng cần tạo chức năng để user thêm bạn bè có thể vào những người bạn hiện tại của họ.

Mở App.js :

nano App.js 

Thêm bạn bè possibleFriends và bạn currentFriends vào trạng thái của thành phần:

// ...  class App extends React.Component {   constructor(props) {     super(props)     this.state = {       possibleFriends: [         'Alice',         'Bob',         'Sammy',       ],       currentFriends: [],     }   }    // ... }  // ... 

Tiếp theo, thêm chức năng di chuyển một người bạn khả dĩ vào danh sách bạn bè hiện tại:

// ...  class App extends React.Component {   constructor(props) {     super(props)     this.state = {       possibleFriends: [         'Alice',         'Bob',         'Sammy',       ],       currentFriends: [],     }   }    addFriend = (index) => {     const {       currentFriends,       possibleFriends,     } = this.state      // Pull friend out of possibleFriends     const addedFriend = possibleFriends.splice(index, 1)      // And put friend in currentFriends     currentFriends.push(addedFriend)      // Finally, update the app state     this.setState({       currentFriends,       possibleFriends,     })   }    // ... }  // ... 

Đến đây, bạn đã xây dựng xong chức năng thêm bạn bè.

Thêm FriendsContext vào App

Đến đây bạn có thể thêm bạn bè trong App.js , nhưng bạn cần thêm họ vào FriendsScreen.js và hiển thị họ trong HomeScreen.js . Vì dự án này được xây dựng bằng React, bạn có thể đưa chức năng này vào màn hình của bạn cùng với ngữ cảnh.

Lưu ý: Trong các version trước của React Navigation, có thể sử dụng screenProps để chia sẻ dữ liệu giữa các màn hình. Trong version hiện tại của React Navigation, bạn nên sử dụng React Context để chia sẻ dữ liệu giữa các màn hình.

Để tránh tham chiếu vòng tròn, bạn cần có file FriendsContext mới:

nano FriendsContext.js 

Export FriendsContext :

import React from 'react';  export const FriendsContext = React.createContext(); 

Mở App.js :

nano App.js 

Thêm FriendsContext :

import 'react-native-gesture-handler'; import React from 'react'; import { StyleSheet } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import { FriendsContext } from './FriendsContext'; import Home from './Home'; import Friends from './Friends';  const Stack = createStackNavigator();  class App extends React.Component {   // ...    render() {     return (       <FriendsContext.Provider>         <NavigationContainer>           <Stack.Navigator>             <Stack.Screen               name="Home"               component={Home}             />             <Stack.Screen               name="Friends"               component={Friends}             />           </Stack.Navigator>         </NavigationContainer>       </FriendsContext.Provider>     );   } }  // ... 

Đoạn mã này cài đặt FriendsContext như một đối tượng Context mới và bao bọc NavigationContainer trong một thành phần Context.Provider để bất kỳ phần tử con nào trong cây thành phần có thể đăng ký thay đổi ngữ cảnh.

Vì bạn không còn sử dụng View hoặc Text , bạn có thể xóa các mục nhập đó khỏi react-native .

Bạn cần cung cấp value để người tiêu dùng có thể truy cập dữ liệu:

// ...  class App extends React.Component {   // ...    render() {     return (       <FriendsContext.Provider         value={           {             currentFriends: this.state.currentFriends,             possibleFriends: this.state.possibleFriends,             addFriend: this.addFriend           }         }       >         <NavigationContainer>           <Stack.Navigator>             <Stack.Screen               name="Home"               component={Home}             />             <Stack.Screen               name="Friends"               component={Friends}             />           </Stack.Navigator>         </NavigationContainer>       </FriendsContext.Provider>     );   } }  // ... 

Điều này sẽ cho phép các HomeScreen và FriendsScreen để tham khảo bất kỳ thay đổi ngữ cảnh để currentFriends và possibleFriends .

Đến đây bạn có thể tham khảo ngữ cảnh trong màn hình của bạn .

Thêm FriendsContext vào HomeScreen

Ở bước này, bạn sẽ cài đặt ứng dụng để hiển thị số lượng bạn bè hiện tại.

Mở HomeScreen.js :

nano HomeScreen.js 

Và thêm FriendsContext :

import React from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; import { FriendsContext } from './FriendsContext';  class HomeScreen extends React.Component {   // ... } HomeScreen.contextType = FriendsContext;  // ... 

Mã này cài đặt một Class.contextType . Đến đây bạn có thể truy cập ngữ cảnh trong màn hình của bạn .

Ví dụ, ta hãy làm bạn HomeScreen hiển thị có bao nhiêu currentFriends bạn có:

import React from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; import { FriendsContext } from './FriendsContext';  class Home extends React.Component {   render() {     return (       <View style={styles.container}>         <Text>You have { this.context.currentFriends.length } friends!</Text>          <Button           title="Add some friends"           onPress={() =>             this.props.navigation.navigate('Friends')           }         />       </View>     );   } } HomeScreen.contextType = FriendsContext;  // ... 

Nếu bạn mở lại ứng dụng của bạn trong trình mô phỏng và xem HomeScreen , bạn sẽ thấy thông báo: Bạn có 0 người bạn! .

Thêm FriendsContext vào FriendsScreen

Trong bước này, bạn sẽ cài đặt ứng dụng để hiển thị những người bạn có thể có và cung cấp các node để thêm họ vào những người bạn hiện tại.

Tiếp theo, mở FriendsScreen.js :

nano FriendsScreen.js 

Và thêm FriendsContext :

import React from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; import { FriendsContext } from './FriendsContext';  class FriendsScreen extends React.Component {   // ... } FriendsScreen.contextType = FriendsContext;  // ... 

Mã này cài đặt một Class.contextType .

Bây giờ, hãy tạo một nút để thêm bạn bè trong FriendsScreen.js :

import React from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; import { FriendsContext } from './FriendsContext';  class Friends extends React.Component {   render() {     return (       <View style={styles.container}>         <Text>Add friends here!</Text>          {           this.context.possibleFriends.map((friend, index) => (             <Button               key={ friend }               title={ `Add ${ friend }` }               onPress={() =>                 this.context.addFriend(index)               }             />           ))         }          <Button           title="Back to home"           onPress={() =>             this.props.navigation.navigate('Home')           }         />       </View>     );   } } FriendsScreen.contextType = FriendsContext;  // ... 

Nếu bạn mở lại ứng dụng của bạn trong trình mô phỏng và xem FriendsScreen Bạn bè, bạn sẽ thấy danh sách bạn bè để thêm.

Nếu bạn truy cập FriendsScreen và nhấp vào nút thêm bạn bè, bạn sẽ thấy danh sách Bạn bè possibleFriends giảm xuống. Nếu bạn truy cập HomeScreen , bạn sẽ thấy số lượng bạn bè tăng lên.

Như vậy, bạn có thể chuyển giữa các màn hình và chia sẻ dữ liệu giữa chúng.

Kết luận

Trong hướng dẫn này, bạn đã tạo một ứng dụng React Native mẫu với nhiều màn hình. Sử dụng React Navigation, bạn đã nghĩ ra một cách để chuyển giữa các màn hình. Sử dụng React Context, bạn đã phát triển một cách để chia sẻ dữ liệu giữa các màn hình.

Mã nguồn hoàn chỉnh cho hướng dẫn này có sẵn trên GitHub .

Nếu bạn muốn tìm hiểu sâu hơn về React Navigation, hãy xem tài liệu của họ .

React Navigation không phải là giải pháp định tuyến và chuyển duy nhất. Ngoài ra còn có React Native Navigation , React Native Router Flux và React Router Native .

Nếu bạn muốn tìm hiểu thêm về React, hãy xem loạt bài Cách viết mã trong React.js của ta hoặc xem trang chủ đề React của ta để biết các bài tập và dự án lập trình.

---

---

Các tin liên quan