FAB เป็นปุ่มที่ลอยอยู่บนสุดของจอเรา หลายแอปก็ใช้กันเพื่อความสวยงาม ทีนี้เราจะมาดูกันว่าปุ่มนี้มันเขียนยังไงโดยที่เราไม่ต้องลง library อะไรเพิ่มเลย
เราจะใช้อยู่ 2 component หลักๆ ก็คือ Text กับ TouchableOpacity ส่วน stylesheet ใช้เพื่อที่จะได้ไม่ต้องเขียน inline-style
ใส่ component แบบในรูป ซึ่ง + ข้างใน Text เราตจะทำเป็นเหมือน icon
จะเห็นว่าไม่มีอะไรบนจอเลย เหมือนต้องมาใส่ style ให้กับ component ของเรา
ใส่ borderRadius เพื่อให้ปุ่มกดนั้นกลม alignSelf -> center เพื่อให้ปุ่มปุ่มอยู่ตรงกลาง alignItem กับ justifyContent ให้ Text ด้านในอยู่ตรงกลาง
เราเห็นปุ่มแล้ว แต่กลายเป็นว่าเราเห็นปุ่มไม่เต็ม วิธีแก้คือใส่ position -> absolute เข้าไป
เห็นปุ่มทั้งปุ่มแล้ว แต่ icon เรายังไม่ได้ปรับ ดังนั้นเราจะทำ style ให้กับ Text ด้านใน
เกือบได้แล้วติดที่ว่า icon เราไม่ตรงกลางปุ่ม เราจะปรับให้กลางโดยใส่ margin เข้าไป
เท่านี้ก็เรียบร้อย เราได้ปุ่ม FAB แล้ว ด้านในจริงๆก็สามารถใส่รูปหรือ vector icon ได้เหมือนกัน ท่านสามารถนำไปปรับให้เข้ากับแอปของท่านได้เช่นกัน
ผู้เขียน Tanapat Limtemsap
วันที่ 1 เมษายน พ.ศ. 2565