ควรใช้ TouchableNativeFeedback, TouchableHighlight หรือ TouchableOpacity เมื่อใด

ในการตอบสนองพื้นเมืองมีอย่างน้อยสามวิธีที่จะทำให้ปุ่ม: TouchableNativeFeedback, และTouchableHighlight TouchableOpacityนอกจากนี้ยังมีTouchableWithoutFeedbackซึ่งเอกสารระบุไว้อย่างชัดเจนว่าคุณไม่ควรใช้เนื่องจาก "องค์ประกอบทั้งหมดที่ตอบสนองต่อการกดควรมีการตอบสนองด้วยภาพเมื่อสัมผัส"

• TouchableNativeFeedbackเป็น Android เท่านั้นและ "แทนที่ View ด้วย RCTView อินสแตนซ์อื่น"
• TouchchableHighlight "เพิ่มมุมมองให้กับลำดับชั้นของมุมมอง"
• TouchableOpacityทำงาน "โดยไม่ต้องเปลี่ยนลำดับชั้นของมุมมอง"

มีความแตกต่างที่สำคัญอื่น ๆ ระหว่างทั้งสามหรือไม่? หนึ่งในนั้นเป็นส่วนประกอบ goto หรือไม่? ในสิ่งที่กรณีที่คุณควรใช้TouchableHighlightมากกว่าTouchableOpacity? มีผลกระทบด้านประสิทธิภาพหรือไม่?

ฉันกำลังเขียนแอปพลิเคชันอยู่ในขณะนี้และพบว่าทั้งสามมีความล่าช้าอย่างมากระหว่างการแตะและการกระทำ (ในกรณีนี้คือการเปลี่ยนแปลงการนำทาง) มีวิธีใดบ้างที่จะทำให้ปลากระพง?

แหล่งที่มา: https://medium.com/differential/better-cross-platform-react-native-components-cb8aadeba472โดย Nick Wientge

TouchableHighlight

•ทำอะไร: ทำให้พื้นหลังขององค์ประกอบมืดหรือสว่างขึ้นเมื่อกด

•ควรใช้เมื่อใด: บน iOS สำหรับองค์ประกอบที่สัมผัสได้หรือปุ่มที่มีรูปร่างทึบหรือพื้นหลังและในรายการ ListView

TouchableOpacity

•ให้ประโยชน์อะไรบ้าง: ลดความทึบขององค์ประกอบทั้งหมดเมื่อกด

•ควรใช้เมื่อใด: บน iOS สำหรับองค์ประกอบที่สัมผัสได้ซึ่งเป็นข้อความหรือไอคอนแบบสแตนด์อโลนที่ไม่มีสีพื้นหลัง

TouchableNativeFeedback

•มันทำอะไร: เพิ่มเอฟเฟกต์ระลอกคลื่นให้กับพื้นหลังเมื่อกด

•ควรใช้เมื่อใด: บน Android สำหรับองค์ประกอบที่สัมผัสได้เกือบทั้งหมด

นี่คือวิธีที่ฉันมักจะตัดสินใจว่าจะใช้อะไร:

• หากฉันกำลังสร้างสำหรับ Android เท่านั้นและส่วนประกอบมีขนาดใหญ่พอที่ความคิดเห็นดั้งเดิมจะแตกต่างอย่างเห็นได้ชัดจากการใช้งานอื่น ๆ ฉันจึงใช้ TouchableNativeFeedback
• TouchableHighlightถ้าผมต้องการที่จะควบคุมความทึบแสงในส่วนหรือฉันต้องการให้ปุ่มที่จะมีสีเมื่อสัมผัสและฉันไม่ต้องการที่จะควบคุมรัฐที่มุ่งเน้นขององค์ประกอบบางอย่างภายในสัมผัสแล้วผมใช้ ( TouchableOpacityมีบางส่วนแปลก ๆ เมื่อคุณควบคุมความทึบด้วยตัวเอง)
• ในกรณีอื่น ๆ ฉันใช้TouchableOpacityเพราะ "เปลือย" มากกว่าTouchableHighlight

ฉันคิดว่าความแตกต่างที่สำคัญหลัก ๆ ตามที่ระบุไว้ในเอกสาร:

TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View.ลิงค์

สัมผัสได้

TouchableHighlight กระดาษห่อสำหรับทำให้มุมมองตอบสนองต่อการสัมผัสอย่างเหมาะสม เมื่อกดลงความทึบของมุมมองที่ห่อไว้จะลดลงซึ่งจะทำให้สีด้านล่างสามารถแสดงผ่านทำให้มุมมองมืดลงหรือย้อมสีได้

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

สัมผัสได้

TouchableOpacity # เสื้อคลุมสำหรับทำให้มุมมองตอบสนองต่อการสัมผัสอย่างเหมาะสม เมื่อกดลงความทึบของมุมมองที่ห่อไว้จะลดลงและทำให้มืดลง

ถ้าคุณต้องการ

• ปุ่มไฮไลต์เมื่อกด - ใช้ TouchableHighlight
• เปลี่ยนความทึบของปุ่มเมื่อกด - ใช้ TouchableOpacity