เหตุใดฉันจึงเปลี่ยนไปใช้ React Native เพื่อสร้างแผ่นงานด้านล่างสุดง่าย

ฉันเพิ่งเปลี่ยนงาน และหนึ่งในงานแรกของฉันคือการสร้างชีตด้านล่างใน React Native

มาจากพื้นฐานการพัฒนา Android ดั้งเดิม ฉันคิดว่ามันน่ากลัวพอๆ กับการสร้างชีตด้านล่างในเนทีฟ แต่ฉันคิดผิดมาก! ฉันรู้สึกทึ่งมากจนตัดสินใจเขียนบทช่วยสอนง่ายๆ เกี่ยวกับการสร้างชีตด้านล่างใน React Native

แผ่นงานด้านล่างเป็นส่วนประกอบที่มีประโยชน์ซึ่งเลื่อนขึ้นจากด้านล่างของหน้าจอ และมักมีตัวเลือกต่างๆ เป็นเรื่องปกติมากในการออกแบบที่ทันสมัยและใช้งานโดยแอปต่างๆ เช่น Uber, Zomato และอื่นๆ อีกมากมาย

ผลลัพธ์สุดท้ายจะมีลักษณะดังนี้:

มาดูวิธีสร้างชีตด้านล่างใน React Native

เริ่มต้นใช้งาน

ขั้นแรก สร้างโครงการใหม่ใน React Native ฉันใช้ expo-cli สำหรับสิ่งนี้ หากคุณไม่รู้จัก expo-cli หรือเพิ่งเริ่มต้นกับ React Native ให้ตรวจสอบลิงก์นี้

ฉันตั้งชื่อโปรเจ็กต์ BottomSheetDemo แล้ว

ถัดไป เราจะต้องติดตั้ง react-native-modalbox สิ่งนี้ทำให้เรามีความสามารถมากมายในตัว เช่น แอนิเมชั่น ตำแหน่ง ฉากหลัง ฯลฯ

$ expo ติดตั้ง react-native-modalbox@1.7.1

หมายเหตุ:อย่าลืมติดตั้งเวอร์ชัน 1.7.1 เวอร์ชันล่าสุดมีข้อบกพร่องที่ backgroundPressToClose ไม่ทำงาน

การสร้าง Modal

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

นี่คือกระดูกเปลือยของชีต/โมดอลด้านล่างของเรา เราจะแสดงที่ข้อความที่กึ่งกลางของกิริยาช่วย

การเพิ่มการโต้ตอบ

เราต้องการแผ่นด้านล่างเพื่อแสดงเมื่อกดปุ่ม มาเพิ่มการโต้ตอบกัน

ฉันจะเพิ่มปุ่มง่ายๆ ตรงกลางหน้าจอ:

เมื่อคลิกปุ่มนี้ เราต้องแสดง/ซ่อนชีตด้านล่าง ในการทำเช่นนี้ เราจะรักษาสถานะโดยใช้ตะขอ useState React

โมดอลของเรามีพร็อพชื่อ "isOpen" ซึ่งเราสามารถสลับเพื่อแสดง/ซ่อนชีตด้านล่างของเราได้ ในการแสดง เราจะตั้งค่า modalVisible เป็น false และในทางกลับกัน

แต่ก่อนอื่น เรามาแยกโมดอลของเราออกจากโค้ดที่เหลือกันก่อนเพราะมันเริ่มจะเลอะเทอะเล็กน้อย ฉันจะสร้างฟังก์ชันแยกต่างหากซึ่งจะส่งคืนกิริยาของฉัน

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

มาใส่สไตล์กัน!

สร้างสไตล์ชีตและเพิ่มสไตล์ต่อไปนี้:

โค้ดสุดท้ายมีลักษณะดังนี้:

ในที่สุดเราก็ได้สร้างแผ่นงานด้านล่างของเราใน React Native มันง่ายมากและสร้างได้ง่ายกว่าใน Android ดั้งเดิม

ฉันไม่สามารถแสดงความคิดเห็นบน iOS เนื่องจากฉันไม่เคยลองมาก่อน

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

เข้าร่วมพื้นที่ทำงาน AndroidVille SLACK สำหรับนักพัฒนาอุปกรณ์เคลื่อนที่ที่ซึ่งผู้คนจะแบ่งปันการเรียนรู้เกี่ยวกับเทคโนโลยีล่าสุด โดยเฉพาะการพัฒนา Android, RxJava, Kotlin, Flutter และการพัฒนาอุปกรณ์เคลื่อนที่โดยทั่วไป

คลิกที่ลิงค์นี้เพื่อเข้าร่วมเวิร์กสเปซ ฟรีอย่างแน่นอน

ชอบสิ่งที่คุณอ่าน? อย่าลืมแชร์โพสต์นี้บน Facebook, Whatsapp และ LinkedIn

คุณสามารถติดตามฉันได้บน LinkedIn, Quora, Twitter และ Instagram ซึ่งฉันจะตอบคำถามเกี่ยวกับการพัฒนามือถือ โดยเฉพาะ Android และ Flutter