React Navigation หัวใจสำคัญของ React Native

React Navigation หัวใจสำคัญของ React Native
25/02/19   |   5.1k   |  

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

สร้าง Project React Native ด้วย Expo

ทำไมต้อง Expo? ก็เพราะว่าง่ายครับ ส่วนตัวผมนั้นเชียร์ให้ใช้ Expo ครับ ถ้าไม่ได้ Custom ฝั่ง Native แบบขั้น Advance ขนาดนั้น เพราะเจ้า Expo นั้นค่อนข้างครอบคลุมสำหรับฝั่ง Native ซึ่งการใช้งาน React Navigation ก็เช่นกันครับ ถ้าหากไม่ใช้ Expo ก็ต้องทำการ Config ฝั่ง Native ด้วยครับ แต่สำหรับ Expo นั้นไม่ต้องทำอะไรเลยครับ ซึ่งผมมองว่าเป็นข้อดีมากๆ แต่สำหรับใครที่ยังไม่มี Expo ก็ลองทำตามบทความ วิธีรัน Genymotion ด้วย Expo สำหรับ React Native และ รัน React Native บน ios Simulator ง่ายๆ ด้วย Expo ได้เลยครับ เอาล่ะเมื่อได้แล้วก็ลอง Init Project กันเลย พิมพ์ตามคำสั่งนี้

expo init myApp

จากนั้นก็เลือกตาม Default เลย ตอนนี้เราก็ได้ Project ใหม่ชื่อว่า myApp มาแล้ว

ติดตั้ง React Navigation

พิมพ์คำสั่งตามนี้เลยครับ

yarn add react-navigation หรือ npm install react-navigation --save

สำหรับ Expo นั้นเพียงแค่นี้เราก็ติดตั้ง React navigation สำเร็จแล้ว แต่สำหรับ React Native ที่ไม่ได้ Init ด้วย Expo นั้นจะต้องทำการ Config ฝั่ง Native ด้วย ซึ่งสามารถดูได้จากเว็บหลักเลยครับ https://reactnavigation.org/docs/en/getting-started.html จะสังเกตุว่าการใช้ Expo นั้นง่ายมากๆ เลยใช่มั้ยครับ อิอิ

เอาล่ะครับ เมื่อติดตั้ง Expo เรียบร้อยแล้วก็ลองเล่นกันดูครับ

ลองใช้งาน React Navigation

ให้สร้าง Component มา 2 ไฟล์ ช่ือว่า HomeScreen และ ProfileScreen ซึ่งตอนนี้เราจะต้องได้โครงสร้างตามด้านล่างนี้

- assets
- App.js
- HomeScreen.js
- ProfileScreen.js
- app.json
- package.json

ก่อนอื่นต้องสร้างปลายทางที่จะไปก่อนครับ

ไฟล์ HomeScreen.js พิมพ์โค้ดดังนี้

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

export default class HomeScreen extends React.Component {

  static navigationOptions = {
    title: 'Home',
  };

  gotoProfile = () => {
    const { navigation } = this.props
    navigation.navigate('Profile')
  }

  render() {
    return (
      
        Home Screen
        
      
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    fontSize: 20,
    textAlign: 'center',
  },
});

ไฟล์ ProfileScreen.js ให้พิมพ์ดังนี้

import React from 'react'
import { View, Text, StyleSheet } from 'react-native'

export default class ProfileScreen extends React.Component {

  static navigationOptions = {
    title: 'Profile',
  };

  render() {
    return (
      
        Profile Screen
      
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    fontSize: 20,
    textAlign: 'center',
  },
});

เมื่อได้ไฟล์ปลายทางแล้ว ให้เราทำการกำหนดเส้นทางในแต่ละหน้าครับ ในไฟล์ App.js ตามนี้ได้เลยครับ

import { createStackNavigator, createAppContainer } from 'react-navigation';
import HomeScreen from './HomeScreen';
import ProfileScreen from './ProfileScreen'

const AppNavigator = createStackNavigator({
  Home: {screen: HomeScreen},
  Profile: {screen: ProfileScreen}
});

const App = createAppContainer(AppNavigator);

export default App

จากนั้นลองรันโปรแกรมดูครับ ดูซิว่าจะมีอะไรโผล่มาบ้าง ตามคำสั่งด้านล่างเลยครับ

expo start

จะได้ผลลัพธ์คือ

หน้า Home มี Header ซึ่งเจ้าตัว Header ถูกสร้างขึ้นด้วย React Navigation นั่นเองครับ

เดี๋ยวอธิบายการทำงานของ React Navigation จาก Code คร่าวๆ นะครับ

ไฟล์ App.js คือโค้ดที่กำหนดเส้นทางทั้งหมดของแอพ

ส่วนไฟล์แต่ละ Component จะมีโค้ด navigationOptions ที่เป็น Object อยู่ก็คือโค้ดสำหรับกำหนด React Navigation ของแต่ละหน้าครับ ตัวอย่างก็อย่างที่เห็นก็คือส่วนของ Header ครับ ซึ่งเราสามารถกำหนดในแต่ละหน้าได้ ลองเพิ่ม Style ให้ Header ในหน้า Profile กัน ลองพิมพ์ตามโค้ดด้านล่างนี้เลยครับ

...
...
export default class ProfileScreen extends React.Component {

  static navigationOptions = {
    title: 'Profile',
    headerStyle: {
      backgroundColor: '#f4511e',
    },
  };
...
...

และลองมาดูผลลัพธ์กัน

จะเห็นว่าหน้า ProfileScreen เปลี่ยนสี Header ตาม Style ที่เรากำหนดไว้แล้ว หรือหากไม่ต้องการให้มี Header ก็แค่เพิ่ม Property ชื่อ header ให้เท่ากับ null ส่วนของ Header ก็จะหายไปครับ ซึ่งจริงๆ แล้วมี Config มากมายที่เราสามารถ Customize ได้ครับลองเข้าไปอ่านในคู่มือเพิ่มเติมได้เลยครับ

อธิบายโค้ดต่อ

อีกส่วนหนึ่งที่สำคัญก็คือ props ที่ได้จากการ createAppContainer นั่นก็คือ navigation ในทุก Component ที่ถูกครอบคลุมด้วย React Navigation จะได้ Props navigation ติดมาด้วยแบบอัตโนมัติ ซึ่งเราจะได้ใช้งานบ่อยมากในการสร้างแอพ Props ตัวนี้สารมารถทำอะไรได้บ้าง พูดง่ายๆ ก็คือทำได้ทุกอย่างในการนำทางพาเราไปหน้าใหม่ที่อยู่ในการครอบคลุมของ React Navigation และยังสามารถส่ง Parameter ใน Link ได้ด้วย และอีกมากมาย อ่านเพิ่มเติมได้ที่คู่มือได้เลยครับ 

เอาล่ะพอรู้แล้วใช่มั้ยครับว่าการทำงานของ React Navigation นั้นทำงานอย่างไรบ้าง

สรุป

หัวใจหลักของการทำแอพก็คือการนำทาง เพื่อที่ให้ User สามารถเข้าถึงแอพได้ง่ายและเร็ว ดังนั้นก็ควรจะวางโครงสร้างให้ดีและ React Navigation ก็เป็นเครื่องมือหนึ่งที่ช่วยทำให้การเขียนโค้ดของเราในการทำ Route นั้นง่ายขึ้นหลายเท่า และจุดเด่นของเจ้า React Navigation นั้นคือค่อนข้างครอบคลุม และตอบโจทย์มากๆ สำหรับใครที่ต้องการทำ Route สำหรับแอพ เพราะมี Feature ค่อนข้างครบ และที่สำคัญใช้งานง่ายและเข้าใจง่ายครับ

tags : #react #react native #native #react navigation



ติดตามข่าวสารและเรื่องราวดีๆ ทาง Email