தீர்க்கப்பட்டது: ரியாக்ட் நேட்டிவ் பொத்தான் சுற்று

ரியாக்ட் நேட்டிவ் பொத்தான்களில் சிக்கல் உள்ளது, அதைப் பார்ப்பதற்கும் புரிந்துகொள்வதற்கும் கடினமாக இருக்கும். நீங்கள் ரியாக்ட் நேட்டிவ்வில் ஒரு பட்டனை உருவாக்கும் போது, ​​சுற்று அல்லது சதுர பட்டனை உருவாக்க உங்களுக்கு விருப்பம் உள்ளது. இருப்பினும், உங்கள் பயன்பாட்டில் இந்தப் பொத்தான்களைப் பயன்படுத்தும்போது, ​​எது வட்டமானது, எது சதுரமானது என்பதைப் பார்ப்பது கடினமாக இருக்கும். உங்கள் பயன்பாட்டில் உள்ள பட்டன்களைப் பயன்படுத்த முயற்சிக்கும்போது இது குழப்பம் மற்றும் சிக்கல்களுக்கு வழிவகுக்கும்.

 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 பாணி உள்ளது. பொத்தானின் உரையானது ஐந்தாவது வரியில் வரையறுக்கப்பட்ட styles.text பாணியைக் கொண்டிருக்கும்.

ஆறாவது மற்றும் ஏழாவது வரிகள் முறையே கொள்கலன் மற்றும் பொத்தான் கூறுகளுக்கான பாணிகளை வரையறுக்கின்றன. கன்டெய்னர் உறுப்பு ஜஸ்டிஃபை உள்ளடக்கத்தைக் கொண்டிருக்கும் மற்றும் உருப்படிகளை 'மையத்தில்' அமைக்கும், இதனால் பொத்தான் திரையில் மையமாக இருக்கும். பொத்தான் உறுப்பு '#4ba37b' பின்னணி நிறத்தையும் 100 பிக்சல்கள் அகலத்தையும் கொண்டிருக்கும். இது எல்லை ஆரம் 50 ஆக அமைக்கப்படும், எனவே அது செவ்வகமாக இல்லாமல் வட்டமாகத் தோன்றும். இறுதியாக, அதில் உள்ள உரை செங்குத்தாகவும் கிடைமட்டமாகவும் மையப்படுத்தப்படும் வகையில், 'மையத்தில்' அமைக்கப்படும் alignItems இருக்கும்.

எதிர்வினையில் பொத்தான்களை அமைக்கவும்

ரியாக்ட் நேட்டிவ்வில் சில வெவ்வேறு வகையான பொத்தான்கள் உள்ளன:

பட்டன்

உரை உள்ளீடு

ரேடியோ பட்டன்

பெட்டியை

பொத்தான்களுக்கு பாணிகளை எவ்வாறு வழங்குவது

React Nativeல் உள்ள பொத்தான்களுக்கு ஸ்டைல்களை வழங்க சில வழிகள் உள்ளன.

ஸ்டைல்ஷீட் கூறுகளைப் பயன்படுத்துவது ஒரு வழி. ஸ்டைல்ஷீட் கூறுகளின் உருவாக்கம்() முறைக்கு இரண்டாவது வாதமாக நீங்கள் ஒரு ஸ்டைல் ​​பொருளை அனுப்பலாம். பாணி பொருள் எழுத்துரு, நிறம் மற்றும் பின்னணி வண்ணத்திற்கான பண்புகளைக் கொண்டிருக்கலாம்.

மற்றொரு வழி பொத்தான் கூறுகளைப் பயன்படுத்துவது. பட்டன் கூறுகளின் உருவாக்கம்() முறைக்கு இரண்டாவது வாதமாக நீங்கள் ஒரு ஸ்டைல் ​​ஆப்ஜெக்ட்டில் அனுப்பலாம். பாணி பொருள் எழுத்துரு, நிறம் மற்றும் பின்னணி வண்ணத்திற்கான பண்புகளைக் கொண்டிருக்கலாம்.