रिएक्टिव नेटिव - बटन

इस अध्याय में, हम आपको प्रतिक्रियाशील मूल तत्व दिखाने वाले घटक दिखाएंगे। हम उन्हें 'टौचेबल' कहते हैं क्योंकि वे एनिमेशन में निर्मित हैं और हम इसका उपयोग कर सकते हैंonPress स्पर्श घटना से निपटने के लिए सहारा।

फेसबुक प्रदान करता है 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'
   }
})

Touchable मूल निवासी प्रतिक्रिया

जब तत्व दबाया जाता है तो यह स्याही एनीमेशन का अनुकरण करेगा।

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>