React Native - ปุ่มต่างๆ

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

Facebook เสนอไฟล์ Buttonคอมโพเนนต์ซึ่งสามารถใช้เป็นปุ่มทั่วไป พิจารณาตัวอย่างต่อไปนี้เพื่อให้เข้าใจตรงกัน

App.js

import React, { Component } from 'react'
import { Button } from 'react-native'

const App = () => {
   const handlePress = () => false
   return (
      <Button
         onPress = {handlePress}
         title = "Red button!"
         color = "red"
      />
   )
}
export default App

ถ้าค่าเริ่มต้น Button ส่วนประกอบไม่ตรงกับความต้องการของคุณคุณสามารถใช้ส่วนประกอบต่อไปนี้แทนได้

ความทึบที่สัมผัสได้

องค์ประกอบนี้จะเปลี่ยนความทึบขององค์ประกอบเมื่อสัมผัส

App.js

import React from 'react'
import { TouchableOpacity, StyleSheet, View, Text } from 'react-native'

const App = () => {
   return (
      <View style = {styles.container}>
         <TouchableOpacity>
            <Text style = {styles.text}>
               Button
            </Text>
         </TouchableOpacity>
      </View>
   )
}
export default App

const styles = StyleSheet.create ({
   container: {
      alignItems: 'center',
   },
   text: {
      borderWidth: 1,
      padding: 25,
      borderColor: 'black',
      backgroundColor: 'red'
   }
})

ไฮไลต์ที่สัมผัสได้

เมื่อผู้ใช้กดองค์ประกอบองค์ประกอบนั้นจะเข้มขึ้นและสีพื้นฐานจะแสดงผ่าน

App.js

import React from 'react'
import { View, TouchableHighlight, Text, StyleSheet } from 'react-native'

const App = (props) => {
   return (
      <View style = {styles.container}>
         <TouchableHighlight>
            <Text style = {styles.text}>
               Button
            </Text>
         </TouchableHighlight>
      </View>
   )
}
export default App

const styles = StyleSheet.create ({
   container: {
      alignItems: 'center',
   },
   text: {
      borderWidth: 1,
      padding: 25,
      borderColor: 'black',
      backgroundColor: 'red'
   }
})

คำติชมพื้นเมืองที่สัมผัสได้

สิ่งนี้จะจำลองภาพเคลื่อนไหวของหมึกเมื่อกดองค์ประกอบ

App.js

import React from 'react'
import { View, TouchableNativeFeedback, Text, StyleSheet } from 'react-native'

const Home = (props) => {
   return (
      <View style = {styles.container}>
         <TouchableNativeFeedback>
            <Text style = {styles.text}>
               Button
            </Text>
         </TouchableNativeFeedback>
      </View>
   )
}
export default Home

const styles = StyleSheet.create ({
   container: {
      alignItems: 'center',
   },
   text: {
      borderWidth: 1,
      padding: 25,
      borderColor: 'black',
      backgroundColor: 'red'
   }
})

สัมผัสได้โดยไม่มีข้อเสนอแนะ

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

<TouchableWithoutFeedback>
   <Text>
      Button
   </Text>
</TouchableWithoutFeedback>