Navigation: การเปลี่ยนหน้าในแอป

Navigation: การเปลี่ยนหน้าในแอป

สวัสดีครับเพื่อนๆ นักพัฒนา React Native ทุกท่าน! ในบทที่แล้ว เราได้เรียนรู้การใช้งาน FlatList เพื่อแสดงรายการข้อมูลจำนวนมากอย่างมีประสิทธิภาพ ทำให้แอปของเราสามารถจัดการข้อมูลได้อย่างราบรื่น ในบทนี้ เราจะมาเรียนรู้เกี่ยวกับการ Navigation หรือการเปลี่ยนหน้าในแอปพลิเคชันของเรา ซึ่งเป็นฟีเจอร์สำคัญที่ช่วยให้ผู้ใช้สามารถใช้งานแอปของเราได้อย่างสะดวกสบายและเป็นระเบียบมากขึ้น

ลองนึกภาพแอปพลิเคชันที่เราสร้างขึ้นมา มีเพียงหน้าเดียวที่มีข้อมูลทั้งหมด แน่นอนว่ามันจะดูรกและใช้งานยากมาก การมีระบบ Navigation ที่ดี จะช่วยให้เราแบ่งเนื้อหาออกเป็นส่วนๆ ได้อย่างชัดเจน ผู้ใช้สามารถเข้าถึงข้อมูลที่ต้องการได้อย่างรวดเร็ว และทำให้ประสบการณ์การใช้งานแอปพลิเคชันโดยรวมดีขึ้นอย่างมาก

ทำไมต้อง React Navigation?

React Native ไม่ได้มีระบบ Navigation มาให้ในตัว เราจึงต้องใช้ Library ภายนอกเข้ามาช่วย ซึ่ง React Navigation เป็น Library ที่ได้รับความนิยมมากที่สุดตัวหนึ่งใน Community React Native ด้วยเหตุผลหลายประการ:

• ความยืดหยุ่น: React Navigation รองรับรูปแบบ Navigation ที่หลากหลาย เช่น Stack Navigator, Tab Navigator, Drawer Navigator และอื่นๆ ทำให้เราสามารถเลือกใช้รูปแบบที่เหมาะสมกับแอปพลิเคชันของเราได้
• Component-Based: React Navigation ถูกสร้างขึ้นมาโดยใช้ React Components ทำให้เราสามารถปรับแต่งและขยายการทำงานของ Navigation ได้อย่างง่ายดาย
• Cross-Platform: React Navigation ทำงานได้ทั้งบน iOS และ Android ทำให้เราสามารถใช้ Codebase เดียวกันในการสร้าง Navigation สำหรับทั้งสอง Platform
• Active Community: React Navigation มี Community ที่แข็งแกร่ง ทำให้เราสามารถหาความช่วยเหลือและ Resources ต่างๆ ได้อย่างง่ายดาย

การติดตั้ง React Navigation

ก่อนที่เราจะเริ่มใช้งาน React Navigation ได้ เราต้องทำการติดตั้ง Package ที่จำเป็นก่อน โดยเราจะใช้ npm หรือ yarn ในการติดตั้ง

# ใช้ npm
npm install @react-navigation/native @react-navigation/stack react-native-safe-area-context react-native-screens

# หรือใช้ yarn
yarn add @react-navigation/native @react-navigation/stack react-native-safe-area-context react-native-screens

คำอธิบาย:

• @react-navigation/native: เป็น Core Package ของ React Navigation
• @react-navigation/stack: เป็น Stack Navigator ซึ่งเป็นรูปแบบ Navigation ที่เราจะใช้ในบทนี้
• react-native-safe-area-context: เป็น Package ที่ช่วยให้เราจัดการกับ Safe Area ของหน้าจอ (เช่น ส่วนที่ถูกบังด้วย Notch หรือ Status Bar)
• react-native-screens: เป็น Package ที่ช่วยเพิ่ม Performance ของ Navigation โดยการใช้ Native Screen APIs

หลังจากติดตั้ง Package เสร็จแล้ว เราต้องทำการ Install Dependencies เพิ่มเติมสำหรับ iOS (ถ้าคุณพัฒนาบน iOS)

cd ios
pod install
cd ..

คำสั่ง pod install จะทำการติดตั้ง CocoaPods Dependencies ที่จำเป็นสำหรับ React Native Projects บน iOS

การสร้าง Stack Navigator

หลังจากติดตั้ง React Navigation เสร็จเรียบร้อยแล้ว เรามาเริ่มสร้าง Stack Navigator กันเลยครับ Stack Navigator เป็นรูปแบบ Navigation ที่ง่ายที่สุดและพบได้บ่อยที่สุดในแอปพลิเคชันมือถือ โดยจะจัดการหน้าต่างๆ ในรูปแบบ Stack (กองซ้อน) เหมือนกับการวางซ้อนกระดาษ เมื่อเรา Navigate ไปยังหน้าใหม่ หน้าเก่าจะถูกวางไว้ด้านล่าง และเมื่อเรากดปุ่ม Back หน้าปัจจุบันจะถูกนำออกจาก Stack และกลับไปยังหน้าก่อนหน้า

ตัวอย่าง Code:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Text, View } from 'react-native';

// สร้าง Component สำหรับหน้า Home
function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

// สร้าง Component สำหรับหน้า Details
function DetailsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

// สร้าง Stack Navigator
const Stack = createNativeStackNavigator();

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

export default App;

คำอธิบาย:

• NavigationContainer: เป็น Container ที่ห่อหุ้ม Stack Navigator และจัดการ Navigation State ทั้งหมด
• createNativeStackNavigator: เป็น Function ที่สร้าง Stack Navigator
• Stack.Navigator: เป็น Component ที่กำหนด Stack Navigator
• Stack.Screen: เป็น Component ที่กำหนดแต่ละหน้าใน Stack Navigator โดยมี Props name (ชื่อของหน้า) และ component (Component ที่จะแสดงในหน้านั้นๆ)

เมื่อรัน Code นี้ คุณจะเห็นหน้า Home Screen แสดงขึ้นมา แต่ยังไม่มีปุ่มให้ Navigate ไปยังหน้า Details Screen ในหัวข้อถัดไป เราจะมาเรียนรู้วิธีการ Navigate ระหว่างหน้าต่างๆ

การ Navigate ระหว่างหน้า

ในการ Navigate ระหว่างหน้าต่างๆ ใน React Navigation เราจะใช้ navigation Prop ที่ถูกส่งมาให้กับ Component ที่ถูก Render ใน Stack.Screen

ตัวอย่าง Code:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Text, View, Button } from 'react-native';

// สร้าง Component สำหรับหน้า Home
function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

// สร้าง Component สำหรับหน้า Details
function DetailsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

// สร้าง Stack Navigator
const Stack = createNativeStackNavigator();

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

export default App;

คำอธิบาย:

• เราเพิ่ม navigation Prop เข้าไปใน HomeScreen Component
• เราใช้ navigation.navigate('Details') เพื่อ Navigate ไปยังหน้า Details Screen เมื่อผู้ใช้กดปุ่ม "Go to Details"

เมื่อรัน Code นี้ คุณจะเห็นปุ่ม "Go to Details" บนหน้า Home Screen เมื่อคุณกดปุ่มนี้ คุณจะถูก Navigate ไปยังหน้า Details Screen

ข้อผิดพลาดที่พบบ่อย

• ลืม Install Dependencies: อย่าลืม Install Dependencies ที่จำเป็นทั้งหมดก่อนที่จะเริ่มใช้งาน React Navigation
• ไม่ส่ง navigation Prop: ตรวจสอบให้แน่ใจว่าคุณส่ง navigation Prop ไปยัง Component ที่คุณต้องการใช้ Navigation
• ใช้ชื่อหน้าผิด: ตรวจสอบให้แน่ใจว่าชื่อหน้าที่คุณใช้ใน navigation.navigate() ตรงกับชื่อหน้าที่คุณกำหนดไว้ใน Stack.Screen

สรุป

ในบทนี้ เราได้เรียนรู้เกี่ยวกับการ Navigation ใน React Native โดยใช้ React Navigation Library เราได้เรียนรู้วิธีการติดตั้ง React Navigation, การสร้าง Stack Navigator และการ Navigate ระหว่างหน้าต่างๆ ด้วย navigation.navigate()

ในบทถัดไป เราจะมาเรียนรู้เกี่ยวกับการ การรับส่งข้อมูลระหว่างหน้าด้วย Navigation Params ซึ่งจะช่วยให้เราสามารถส่งข้อมูลจากหน้าหนึ่งไปยังอีกหน้าหนึ่งได้

หวังว่าบทนี้จะเป็นประโยชน์สำหรับเพื่อนๆ นะครับ แล้วเจอกันในบทถัดไป!