วิธีสร้าง Bottom Tabs และ Stack Screen สำหรับ Mobile App บน React Native (Part 2)

จาก Part ที่แล้ว เราได้ทำ Bottom Tabs ไปเป็นที่เรียบร้อยแล้ว ทีนี้เราจะมาทำ Stack Screen ที่อยู่ในแต่ละ Tab เนื่องจากในแต่ละ Tab ที่เราทำอาจมี screen มากกว่า 1 screen ครับ

เริ่มจากติดตั้ง Package ที่จำเป็น

react-native-gesture-handler

ผมจะยกตัวอย่างโดยการเพิ่ม screen ไปที่ chat โดยใช้ชื่อว่า MessageScreen.js

src
└─ screens
   └─ chat
      ├─ MessageScreen.js
      ├─ ChatScreen.js
      └─ styles.js

MessageScreen.js

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

import styles from './styles'

export default function MessageScreen(props) {

  return (

    <View style={styles.container}>

      <Text style={{ fontSize: 30, fontWeight: 'bold' }}>Messages</Text>

    </View>

  )

}

แก้ไขไฟล์ index.js

export { default as HomeScreen } from './home/HomeScreen'

export{ default as ChatScreen } from './chat/ChatScreen'

export{ default as MessageScreen } from './chat/MessageScreen'

export{ default as ProductScreen } from './product/ProductScreen'

export{ default as SettingScreen } from './setting/SettingScreen'

สร้างไฟล์ StackScreenContainer.js ไว้ในโฟลเดอร์ container

src
└─ container
   └─ MainContainer.js
   └─ StackScreenContainer.js

StackScreenContainer.js

import React from "react"

import { createStackNavigator } from "@react-navigation/stack"

import { HomeScreen, ChatScreen, MessageScreen, ProductScreen, SettingScreen } from "../screens"

const Stack = createStackNavigator()

export { }

เราจะเพิ่ม Stack Screen แล้วทำการ export

const Stack = createStackNavigator()

const HomeStackScreen = () => {

  return (

    <Stack.Navigator screenOptions={({ route }) => ({

      headerShown: false

    })}>

      <Stack.Screen name='HomeScreen'>{props => <HomeScreen {...props} />}</Stack.Screen>

    </Stack.Navigator>

  )

}

export { HomeStackScreen }

เพิ่ม Stack Screen ให้ครบทุก Tab

         ...
         ...

const ChatStackScreen = () => {

  return (

    <Stack.Navigator screenOptions={({ route }) => ({

      headerShown: false

    })}>

      <Stack.Screen name='ChatScreen'>{props => <ChatScreen {...props} />}</Stack.Screen>

    </Stack.Navigator>

  )

}

const ProductStackScreen = () => {

  return (

    <Stack.Navigator screenOptions={({ route }) => ({

      headerShown: false

    })}>

      <Stack.Screen name='ProductScreen'>{props => <ProductScreen {...props} />}</Stack.Screen>

    </Stack.Navigator>

  )

}

const SettingStackScreen = () => {

  return (

    <Stack.Navigator screenOptions={({ route }) => ({

      headerShown: false

    })}>

      <Stack.Screen name='SettingScreen'>{props => <SettingScreen {...props} />}</Stack.Screen>

    </Stack.Navigator>

  )

}

export { HomeStackScreen, ChatStackScreen, ProductStackScreen, SettingStackScreen }

เราจะเพิ่ม MessageScreen.js ไปใน ChatStackScreen

               ...
               ...

const ChatStackScreen = () => {

  return (

    <Stack.Navigator screenOptions={({ route }) => ({

      headerShown: false

    })}>

      <Stack.Screen name='ChatScreen'>{props => <ChatScreen {...props} />}</Stack.Screen>

      <Stack.Screen name='MessageScreen'>{props => <MessageScreen {...props} />}</Stack.Screen>

    </Stack.Navigator>

  )

}

เราจะใช้ <Stack.Screen> เพื่อเพิ่ม Screen ที่จำเป็นต้องใช้ใน Tab นั้น ๆครับ

ทำการแก้ไข import Screens ไปเป็น import Stack Screens ที่ไฟล์ MainContainer.js

import { HomeScreen, ChatScreen, ProductScreen, SettingScreen } from "../screens" //ลบส่วนนี้

import { HomeStackScreen, ChatStackScreen, ProductStackScreen, SettingStackScreen } from "./StackScreenContainer"

และแก้ไข <Tab.Screen>

<Tab.Screen name='Home' children={() => HomeStackScreen()} />

<Tab.Screen name='Chat' children={() => ChatStackScreen()} />

<Tab.Screen name='Product' children={() => ProductStackScreen()} />

<Tab.Screen name='Setting' children={() => SettingStackScreen()} />

ลองรันโปรแกรมด้วย yarn start จะเห็นว่าหน้าตาแสดงผลยังคงเหมือนเดิม

ทีนี้เราจะเพิ่มปุ่มไปที่หน้า Chat เมื่อกดปุ่ม หน้าจอจะแสดงผลหน้า Messages

ChatScreen.js

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

import styles from './styles'

export default function ChatScreen(props) {

  return (

    <View style={styles.container}>

      <Text style={{ fontSize: 30, fontWeight: 'bold' }}>Chat</Text>

      <Button

        title='Open Chat'

        onPress={() => props.navigation.navigate('MessageScreen')} 

      />

    </View>

  )

}

ที่หน้า Chat จะมีปุ่ม OPEN CHAT

เมื่อกดปุ่ม OPEN CHAT หน้าจอจะแสดงผลหน้า Messages

เรายังสามารถส่งค่าจากหน้า Chat ไปที่ Message ได้ด้วยครับ

<Button

  title='Open Chat'

  onPress={() => props.navigation.navigate('MessageScreen', {text: 'Value from Chat'})}

/>

MessageScreen.js

return (

  <View style={styles.container}>

    <Text style={{ fontSize: 30, fontWeight: 'bold' }}>Messages</Text>

    <Text>{props.route.params.text}</Text>

  </View>

)

เรียบร้อยครับ สำหรับวิธีสร้าง Bottom Tabs และ Stack Screen สำหรับ Mobile App บน React Native หวังว่าจะเป็นประโยชน์ให้กับหลาย ๆคนที่กำลังศึกษา React Native อยู่นะครับ ผมจะพยายามเอาความรู้ที่มีมาแชร์เรื่อย ๆนะครับผม