ઉકેલાયેલ: મૂળ બટન રાઉન્ડમાં પ્રતિક્રિયા આપો

રીએક્ટ નેટીવ બટનોમાં સમસ્યા છે જેને જોવા અને સમજવામાં મુશ્કેલી પડી શકે છે. જ્યારે તમે રીએક્ટ નેટીવમાં બટન બનાવો છો, ત્યારે તમારી પાસે રાઉન્ડ અથવા ચોરસ બટન બનાવવાનો વિકલ્પ હોય છે. જો કે, જ્યારે તમે તમારી એપ્લિકેશનમાં આ બટનોનો ઉપયોગ કરો છો, ત્યારે તે જોવાનું મુશ્કેલ બની શકે છે કે કયું ગોળ છે અને કયું ચોરસ છે. જ્યારે તમે તમારી એપ્લિકેશનમાં બટનોનો ઉપયોગ કરવાનો પ્રયાસ કરી રહ્યાં હોવ ત્યારે આ મૂંઝવણ અને સમસ્યાઓ તરફ દોરી શકે છે.

 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 } });

આ કોડ રીએક્ટ નેટીવમાં લખાયેલો છે અને એક બટન બનાવે છે જે કહે છે કે "મી પર ક્લિક કરો." જ્યારે બટન ક્લિક કરવામાં આવે છે, ત્યારે એક ક્રિયા કરવામાં આવે છે.

પ્રથમ લાઇન રીએક્ટ અને રીએક્ટ નેટિવ લાઇબ્રેરીઓને આયાત કરે છે.

બીજી લાઇન એપ નામનું એક ઘટક બનાવે છે. આ ઘટક એક બટન રેન્ડર કરશે.

ત્રીજી લાઇન એપ્લિકેશન ઘટકને રેન્ડર કરે છે. એપ્લિકેશન ઘટકમાં ટચેબલ ઓપેસીટી તત્વ છે, જે બટન તરીકે રેન્ડર થશે. બટનમાં styles.button ની શૈલી છે, જે ચોથી લાઇનમાં વ્યાખ્યાયિત છે. બટનના ટેક્સ્ટમાં styles.text ની શૈલી હશે, જે પાંચમી લાઇનમાં વ્યાખ્યાયિત છે.

છઠ્ઠી અને સાતમી રેખાઓ અનુક્રમે કન્ટેનર અને બટન તત્વો માટેની શૈલીઓ વ્યાખ્યાયિત કરે છે. કન્ટેનર તત્વમાં justifyContent અને alignItems 'center' પર સેટ હશે, જેથી બટન સ્ક્રીન પર કેન્દ્રિત થશે. બટન એલિમેન્ટમાં '#4ba37b' નો બેકગ્રાઉન્ડ કલર અને 100 પિક્સેલની પહોળાઈ હશે. તેની બોર્ડરરેડિયસ 50 પર સેટ પણ હશે, જેથી તે લંબચોરસને બદલે વર્તુળ તરીકે દેખાય. છેલ્લે, તેમાં સંરેખિત આઇટમ્સ 'કેન્દ્ર' પર સેટ હશે, જેથી તેની અંદરનું લખાણ ઊભી અને આડી રીતે કેન્દ્રિત કરવામાં આવે.

પ્રતિક્રિયામાં બટનો સેટ કરો

રીએક્ટ નેટીવમાં કેટલાક વિવિધ પ્રકારનાં બટનો છે:

બટન

ટેક્સ્ટઇનપુટ

રેડીયો બટન

ચેકબૉક્સ

બટનોને સ્ટાઇલ કેવી રીતે આપવી

રીએક્ટ નેટીવમાં બટનોને સ્ટાઇલ આપવાની કેટલીક રીતો છે.

સ્ટાઇલશીટ ઘટકનો ઉપયોગ કરવાની એક રીત છે. તમે સ્ટાઇલશીટ ઘટકની create() પદ્ધતિમાં બીજી દલીલ તરીકે સ્ટાઇલ ઑબ્જેક્ટમાં પસાર કરી શકો છો. શૈલી ઑબ્જેક્ટમાં ફોન્ટ, રંગ અને પૃષ્ઠભૂમિ રંગ માટે ગુણધર્મો હોઈ શકે છે.

બીજી રીત બટન ઘટકનો ઉપયોગ કરવાનો છે. તમે બટન ઘટકની create() પદ્ધતિમાં બીજી દલીલ તરીકે સ્ટાઇલ ઑબ્જેક્ટમાં પસાર કરી શકો છો. શૈલી ઑબ્જેક્ટમાં ફોન્ટ, રંગ અને પૃષ્ઠભૂમિ રંગ માટે ગુણધર્મો હોઈ શકે છે.