React Native - สัมผัสและขนาดหน้าจอ

React Native ทำให้กระบวนการพัฒนาแอปพลิเคชันที่ทำงานได้ทั้งบนอุปกรณ์ Android และ iOS ง่ายกว่าที่เคยเป็นมา ในขณะที่ก่อนหน้านี้คุณต้องทำงานกับภาษาการเขียนโปรแกรมอย่างน้อยสองภาษาและ API ที่แตกต่างกันอย่างมากมาย React Native มีภาษาที่เป็นประโยชน์บางอย่างพร้อมใช้

นี่คือบทสรุปของสองรายการที่จะช่วยคุณสร้างแอปถัดไป

สัมผัสได้

คุณสมบัติหลักบางประการของอุปกรณ์เคลื่อนที่เกี่ยวข้องกับการโต้ตอบกับการสัมผัสของผู้ใช้ วิธีที่แอปบนอุปกรณ์เคลื่อนที่จัดการและตอบสนองต่อการโต้ตอบเหล่านี้สามารถสร้างหรือทำลายประสบการณ์ของผู้ใช้ได้

React Native มาพร้อมกับButtonคอมโพเนนต์ที่ใช้ได้กับonPressการโต้ตอบมาตรฐานจำนวนมาก โดยค่าเริ่มต้นจะให้ข้อเสนอแนะแก่ผู้ใช้โดยการเปลี่ยนความทึบเพื่อแสดงว่าปุ่มถูกกด การใช้งาน:

สำหรับกรณีการใช้งานที่ซับซ้อนมากขึ้นตอบสนองพื้นเมืองมี APIs Touchablesในการสร้างปฏิสัมพันธ์กดจับเรียกว่า

TouchableHighlight TouchableNativeFeedback TouchableOpacity TouchableWithoutFeedback

ส่วนประกอบที่สัมผัสได้เหล่านี้สามารถจัดรูปแบบและใช้กับไลบรารีได้เช่นเดียวกับในตัวAnimatedซึ่งช่วยให้คุณสร้างความคิดเห็นของผู้ใช้แบบกำหนดเองได้

ตัวอย่างบางส่วนของการใช้ส่วนประกอบเหล่านี้:

// with images    // with text  Hello 

คุณสามารถจัดการกับการกดปุ่มประเภทต่างๆได้เช่นกัน โดยค่าเริ่มต้นปุ่มและการสัมผัสจะถูกกำหนดค่าให้จัดการกับการแตะปกติ แต่คุณยังสามารถแสดงฟังก์ชันเพื่อเรียกการโต้ตอบแบบกดค้างไว้ได้เช่นกัน

หากต้องการดูอุปกรณ์ประกอบฉากทั้งหมดที่มีและการทำงานของส่วนประกอบเหล่านี้คุณสามารถดูซอร์สโค้ด JavaScript สำหรับ Touch ได้ที่นี่

ขนาดหน้าจอ

React Native ใช้ Dots Per Inch (DPI) เพื่อวัดขนาดของอินเทอร์เฟซผู้ใช้ (UI) และอะไรก็ตามที่แสดงบน UI การวัดประเภทนี้ช่วยให้แอปพลิเคชันมีลักษณะสม่ำเสมอในขนาดหน้าจอและความหนาแน่นของพิกเซลต่างๆ

สำหรับกรณีการใช้งานมาตรฐานสามารถพัฒนาแอปพลิเคชันได้โดยไม่ต้องทราบข้อมูลจำเพาะของอุปกรณ์ของผู้ใช้ (เช่นความหนาแน่นของพิกเซล) เนื่องจากองค์ประกอบ UI จะปรับขนาดโดยอัตโนมัติ

เมื่อจำเป็นจะมี API ที่พร้อมใช้งานเช่นPixelRatioเพื่อช่วยคุณค้นหาความหนาแน่นของพิกเซลของอุปกรณ์ของผู้ใช้

ที่จะได้รับหน้าต่างหรือหน้าจอความสูง / ความกว้างของอุปกรณ์ของผู้ใช้ตอบสนองพื้นเมืองมี API Dimensionsที่เรียกว่า

import { Dimensions } from 'react-native';

นี่คือวิธีการที่DimensionsAPI มีให้:

Dimensions.get('window').height; Dimensions.get('window').width; Dimensions.get('screen').height; Dimensions.get('screen').width;

หมายเหตุ:ในอดีตมีปัญหาที่ทราบบางอย่างเกี่ยวกับ Dimensions API เช่นการไม่ส่งคืนข้อมูลที่ถูกต้องเมื่อผู้ใช้หมุนอุปกรณ์ควรตรวจสอบให้แน่ใจว่าคุณได้ทดสอบสิ่งนี้กับอุปกรณ์จริงก่อนที่จะใช้งานแอปพลิเคชัน

ข้อมูลเพิ่มเติมเกี่ยวกับการออกแบบที่ตอบสนอง:

  • หลักสูตรการออกแบบที่ตอบสนองฟรี
  • บทเรียน Bootstrap ที่ดีที่สุดสำหรับการออกแบบเว็บที่ตอบสนอง
  • วิธีคิดแบบตอบสนอง
  • คำแนะนำเกี่ยวกับภาพที่ตอบสนอง
  • เรียนรู้การออกแบบที่ตอบสนองได้ใน 5 นาที