ผมเปลี่ยนงานเมื่อเร็วๆ นี้ Task แรก: สร้าง Bottom Sheet ใน React Native
มาจาก Native Android Development Background คิดว่าจะ Daunting เท่าสร้าง Bottom Sheet ใน Native แต่ผิดใหญ่! ประทับใจมาก จึงเขียน Tutorial 簡單 สร้าง Bottom Sheet ใน React Native
Bottom Sheet = Component เลื่อนขึ้นจาก Bottom Screen บ่อยครั้งมี Options ต่างๆ Common ใน Modern Design ใช้ใน Apps: Uber, Zomato, etc.
Final Result จะ長这样:
มาดูวิธีสร้าง Bottom Sheet ใน React Native กัน!
Getting Started
สร้าง Project ใหม่ใน React Native ผมใช้ expo-cli หากไม่รู้จัก expo-cli หรือเพิ่งเริ่ม React Native ดู Link นี้
Project Name: BottomSheetDemo
ติดตั้ง react-native-modalbox ให้ Inbuilt Capabilities: Animations, Positions, Backdrops ฯลฯ
$ expo install react-native-modalbox@1.7.1
⚠️ Note: ติดตั้ง Version 1.7.1 เท่านั้น Latest Version มี Bug: backdropPressToClose ไม่ทำงาน
Creating the Modal
สร้าง Modal ลบ Code เริ่มต้น ใส่ใน App.js:
Bare Bones Bottom Sheet/Modal แค่แสดง Text กลาง Modal
Adding Interaction
Bottom Sheet ต้อง Show เมื่อกด Button เพิ่ม Interaction
เพิ่ม Button 简单 กลางหน้าจอ:
Click Button → Show/Hide Bottom Sheet ใช้ State ด้วย useState React Hook
Modal มี Prop isOpen Toggle Show/Hide Bottom Sheet Show: Set modalVisible = true Hide: Set modalVisible = false
แต่ก่อน Separate Modal ออกจาก Code เพราะเริ่ม Messy สร้าง Function แยก Return Modal
Code Clean แล้ว แต่ Bottom Sheet ยังไม่ดูเหมือน Bottom Sheet ต้อง Add Styling
Let's Add Some Styling!
สร้าง Stylesheet ใส่ Styles:
Final Code 全貌:
สร้าง Bottom Sheet ใน React Native เรียบร้อย! Simple และง่ายกว่า Native Android มาก 🎉
iOS ไม่ได้ลอง ไม่คอมเมนต์ได้
ถ้าคุณ iOS Developer หรือมีประสบการณ์ Bottom Sheet iOS แชร์ประสบการณ์ได้เลย
Join AndroidVille SLACK Workspace Mobile Developers แชร์ความรู้ Latest Tech: Android Development, RxJava, Kotlin, Flutter, Mobile Development
Link เข้า Workspace: ที่นี่ ฟรี!
ชอบบทความ? Share บน Facebook, WhatsApp, LinkedIn นะครับ
Follow ผมได้ที่ LinkedIn, Quora, Twitter, Instagram ตอบคำถาม Mobile Development โดยเฉพาะ Android และ Flutter
