हल: प्रतिक्रिया देशी बटन दौर

रिएक्ट नेटिव बटन के साथ एक समस्या है जिसे देखना और समझना मुश्किल हो सकता है। जब आप रिएक्टिव नेटिव में एक बटन बनाते हैं, तो आपके पास एक गोल या चौकोर बटन बनाने का विकल्प होता है। हालाँकि, जब आप अपने ऐप में इन बटनों का उपयोग करते हैं, तो यह देखना मुश्किल हो सकता है कि कौन सा गोल है और कौन सा चौकोर है। जब आप अपने ऐप में बटनों का उपयोग करने का प्रयास कर रहे हों तो इससे भ्रम और समस्याएं हो सकती हैं।

 border

import React, { Component } from 'react'; import { StyleSheet, View, Text, TouchableOpacity } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.container}> <TouchableOpacity style={styles.button}> <Text style={styles.text}>Click Me</Text> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, button: { backgroundColor:'#4ba37b', width:100, borderRadius:50, alignItems:'center', paddingTop:14 }, text:{ color:'#fff', fontSize:16 } });

यह कोड रिएक्टिव नेटिव में लिखा गया है और एक बटन बनाता है जो "मुझे क्लिक करें" कहता है। जब बटन क्लिक किया जाता है, तो एक क्रिया की जाती है।

पहली पंक्ति रिएक्ट और रिएक्ट नेटिव लाइब्रेरी को आयात करती है।

दूसरी पंक्ति ऐप नामक एक घटक बनाती है। यह घटक एक बटन प्रस्तुत करेगा।

तीसरी पंक्ति ऐप घटक को प्रस्तुत करती है। ऐप घटक में TouchableOpacity तत्व होता है, जो एक बटन के रूप में प्रदर्शित होगा। बटन में Styles.button की शैली है, जिसे चौथी पंक्ति में परिभाषित किया गया है। बटन के पाठ में Style.text की शैली होगी, जिसे पाँचवीं पंक्ति में परिभाषित किया गया है।

छठी और सातवीं पंक्तियाँ क्रमशः कंटेनर और बटन तत्वों के लिए शैलियों को परिभाषित करती हैं। कंटेनर तत्व में 'सेंटर' पर सेट जस्टिफाई कंटेंट और अलाइन इटम्स होंगे, ताकि बटन स्क्रीन पर केंद्रित हो जाए। बटन तत्व का पृष्ठभूमि रंग '#4ba37b' और चौड़ाई 100 पिक्सेल होगी। इसकी सीमा-त्रिज्या भी 50 पर सेट होगी, ताकि यह एक आयत के बजाय एक वृत्त के रूप में दिखाई दे। अंत में, इसमें alignItems को 'केंद्र' पर सेट किया जाएगा, ताकि इसके भीतर का पाठ लंबवत और क्षैतिज रूप से केंद्रित हो।

रिएक्ट में बटन सेट करें

रिएक्टिव नेटिव में कुछ अलग प्रकार के बटन हैं:

बटन

पाठ इनपुट

रेडियो की बटन

चेकबॉक्स

बटनों को स्टाइल कैसे दें

रिएक्ट नेटिव में बटनों को स्टाइल देने के कुछ तरीके हैं।

स्टाइलशीट घटक का उपयोग करने का एक तरीका है। आप StyleSheet कॉम्पोनेंट के create() मेथड के दूसरे आर्गुमेंट के रूप में स्टाइल ऑब्जेक्ट में पास कर सकते हैं। शैली वस्तु में फ़ॉन्ट, रंग और पृष्ठभूमि रंग के गुण हो सकते हैं।

दूसरा तरीका बटन घटक का उपयोग करना है। आप बटन घटक के create() विधि के दूसरे तर्क के रूप में स्टाइल ऑब्जेक्ट में पास कर सकते हैं। शैली वस्तु में फ़ॉन्ट, रंग और पृष्ठभूमि रंग के गुण हो सकते हैं।