React Native คือ ตอนที่ 6 : การนำทาง (Navigation)

1. ทำความเข้าใจพื้นฐานของการนำทาง (Navigation)
2. ทำไมต้องใช้ React Navigation
3. การติดตั้ง React Navigation
4. ทำความเข้าใจเกี่ยวกับเนวิเกเตอร์ (Navigator)
   4.1 สแต็คเนวิเกเตอร์ (Stack Navigator)
   4.2 Drawer และ Tab Navigator
5. ส่งผ่านพารามิเตอร์ (Parameters) ไปยังเส้นทาง (Routes)
6. การเชื่อมโยงกับ Deep Links

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

1. ทำความเข้าใจพื้นฐานของการนำทาง (Navigation)

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

ในโลกของการพัฒนาเว็บ การนำทางนี้ค่อนข้างตรงไปตรงมา – แต่ละหน้าแสดง URL ที่แตกต่างกัน และการย้ายไปมาระหว่างหน้านั้นง่ายเหมือนการเปลี่ยน URL อย่างไรก็ตาม ในโลกของการทำแอพ React Native และทำแอพมือถือด้วย React Native งานนี้จะซับซ้อนขึ้นเล็กน้อยเนื่องจากความต้องการรูปแบบการนำทางแบบไดนามิกและเป็นมิตรกับผู้ใช้มากขึ้น เช่น แท็บ ลิ้นชัก โมดอล และการนำทางแบบสแต็ก

2. ทำไมต้องใช้ React Navigation

React Navigation เป็นหนึ่งในไลบรารียอดนิยมสำหรับจัดการการนำทาง (Navigation) ในแอป React Native เป็น JavaScript อย่างสมบูรณ์ หมายความว่าโค้ดส่วนใหญ่ของคุณจะเป็นข้ามแพลตฟอร์ม ซึ่งสอดคล้องกับเป้าหมายในการทำแอพ React Native และทำแอพมือถือข้ามแพลตฟอร์มด้วย React Native อย่างสมบูรณ์แบบ React Navigation มีชุมชนที่ใช้งานอยู่มาก เอกสารประกอบที่มีประสิทธิภาพ และมอบวิธีการที่ตรงไปตรงมาในการจัดการความต้องการในการนำทาง (Navigation) ทั้งแบบมาตรฐานและแบบกำหนดเอง

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

หากต้องการใช้ React Navigation คุณต้องติดตั้งไลบรารีในโครงการของคุณ ใช้ตัวจัดการแพ็คเกจ npm (หรือเส้นด้าย หากคุณต้องการ) เพื่อติดตั้งไลบรารี:

npm install @react-navigation/native

หลังจากติดตั้งไลบรารีหลักแล้ว คุณจะต้องติดตั้งเนวิเกเตอร์เฉพาะ เช่น ตัวนำทางสแต็กหรือตัวนำทางลิ้นชัก ทั้งนี้ขึ้นอยู่กับความต้องการของคุณ

npm install @react-navigation/stack

4. ทำความเข้าใจเกี่ยวกับเนวิเกเตอร์ (Navigator)

เนวิเกเตอร์เป็นส่วนประกอบที่ช่วยให้แอพของคุณเปลี่ยนไปมาระหว่างหน้าจอต่างๆ เนวิเกเตอร์ประเภทหลัก ได้แก่ :

• Stack Navigator : นี่เป็นวิธีการเปลี่ยนระหว่างหน้าจอโดยวางหน้าจอใหม่แต่ละหน้าจอไว้ที่ด้านบนของสแต็ก คล้ายกับวิธีที่เว็บเบราว์เซอร์จัดการกับการนำทาง
• Drawer Navigator : Navigator นี้เพิ่ม Drawer ที่สามารถปัดเข้าจากด้านข้างได้ เป็นรูปแบบทั่วไปที่พบในแอปพลิเคชันมือถือจำนวนมาก
• Tab Navigator : ตัวนำทางนี้เพิ่มแถบแท็บที่ด้านล่างของหน้าจอ (หรือด้านบน ขึ้นอยู่กับแพลตฟอร์ม) ที่ช่วยให้ผู้ใช้สามารถสลับไปมาระหว่างหน้าจอต่างๆ

4.1 สแต็คเนวิเกเตอร์ (Stack Navigator)

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

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

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

ในตัวอย่างนี้ HomeScreen และ DetailsScreen เป็นองค์ประกอบ React ที่แตกต่างกันสองรายการที่จะแสดงผลตามสถานะของสแต็กปัจจุบัน

4.2 Drawer และ Tab Navigator

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

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

5. ส่งผ่านพารามิเตอร์ (Parameters) ไปยังเส้นทาง (Routes)

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

function HomeScreen({ navigation }) {
  return (
    <Button
      title="Go to Details"
      onPress={() => {
        /* Pass params back to details screen */
        navigation.navigate('Details', { itemId: 86, otherParam: 'anything' });
      }}
    />
  );
}

6. การเชื่อมโยงกับ Deep Links

ลิงก์ในรายละเอียดทำให้แอปของคุณเปิดได้ด้วย URL ด้วย React Navigation ลิงก์ในรายละเอียดจะถูกสร้างขึ้นมาในตัว และทำได้ง่ายเพียงแค่ตั้งค่าคอนฟิกูเรชัน

const config = {
  screens: {
    Home: 'home',
    Details: 'details/:id',
  },
};

const linking = {
  prefixes: ['myapp://'],
  config,
};

// In your root component
return (
  <NavigationContainer linking={linking}>
    {/* content */}
  </NavigationContainer>
);

---

การทำความเข้าใจและใช้งานการนำทาง (Navigation) ในแอป React Native เป็นสิ่งสำคัญในการมอบประสบการณ์ผู้ใช้ที่ราบรื่นและใช้งานง่าย ด้วย React Navigation คุณสามารถสร้างโครงสร้างการนำทางที่โดดเด่นและปรับแต่งได้สูงในแอป React Native ข้ามแพลตฟอร์ม ตั้งแต่การนำทางสแต็กพื้นฐานไปจนถึงการนำทาง (Navigation) ในลิ้นชักหรือแท็บที่ซับซ้อนมากขึ้น รูปแบบการนำทางที่คุณเลือกจะกำหนดความสามารถในการใช้งานแอพและประสบการณ์ผู้ใช้ของคุณ โปรดจำไว้ว่าการทำแอพ React Native และทำแอพมือถือที่มีการนำทางที่ดีคือแอพที่ออกแบบมาอย่างดี

---

React Native คืออะไร

React Native คือ ตอนที่ 5 : สไตล์ (Styling)

React Native คือ ตอนที่ 7 : การจัดการสถานะ (State Management)