ರಿಯಾಕ್ಟ್ ಸ್ಥಳೀಯ ಬಟನ್‌ಗಳಲ್ಲಿ ಸಮಸ್ಯೆ ಇದೆ ಅದನ್ನು ನೋಡಲು ಮತ್ತು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಕಷ್ಟವಾಗುತ್ತದೆ. ನೀವು ರಿಯಾಕ್ಟ್ ನೇಟಿವ್‌ನಲ್ಲಿ ಬಟನ್ ಅನ್ನು ರಚಿಸಿದಾಗ, ನೀವು ರೌಂಡ್ ಅಥವಾ ಸ್ಕ್ವೇರ್ ಬಟನ್ ಅನ್ನು ರಚಿಸುವ ಆಯ್ಕೆಯನ್ನು ಹೊಂದಿರುತ್ತೀರಿ. ಆದಾಗ್ಯೂ, ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ನೀವು ಈ ಬಟನ್‌ಗಳನ್ನು ಬಳಸಿದಾಗ, ಯಾವುದು ದುಂಡಾಗಿದೆ ಮತ್ತು ಯಾವುದು ಚೌಕವಾಗಿದೆ ಎಂಬುದನ್ನು ನೋಡಲು ಕಷ್ಟವಾಗುತ್ತದೆ. ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ಬಟನ್‌ಗಳನ್ನು ಬಳಸಲು ನೀವು ಪ್ರಯತ್ನಿಸುತ್ತಿರುವಾಗ ಇದು ಗೊಂದಲ ಮತ್ತು ಸಮಸ್ಯೆಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು.
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.text ನ ಶೈಲಿಯನ್ನು ಹೊಂದಿರುತ್ತದೆ, ಇದನ್ನು ಐದನೇ ಸಾಲಿನಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ.
ಆರನೇ ಮತ್ತು ಏಳನೇ ಸಾಲುಗಳು ಕ್ರಮವಾಗಿ ಕಂಟೇನರ್ ಮತ್ತು ಬಟನ್ ಅಂಶಗಳಿಗೆ ಶೈಲಿಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತವೆ. ಕಂಟೇನರ್ ಅಂಶವು ಜಸ್ಟಿಫೈಕಂಟೆಂಟ್ ಅನ್ನು ಹೊಂದಿರುತ್ತದೆ ಮತ್ತು ಐಟಂಗಳನ್ನು 'ಸೆಂಟರ್' ಗೆ ಹೊಂದಿಸುತ್ತದೆ, ಇದರಿಂದಾಗಿ ಬಟನ್ ಪರದೆಯ ಮೇಲೆ ಕೇಂದ್ರೀಕೃತವಾಗಿರುತ್ತದೆ. ಬಟನ್ ಅಂಶವು '#4ba37b' ನ ಹಿನ್ನೆಲೆ ಬಣ್ಣ ಮತ್ತು 100 ಪಿಕ್ಸೆಲ್‌ಗಳ ಅಗಲವನ್ನು ಹೊಂದಿರುತ್ತದೆ. ಇದು ಗಡಿ ತ್ರಿಜ್ಯವನ್ನು 50 ಕ್ಕೆ ಹೊಂದಿಸುತ್ತದೆ, ಆದ್ದರಿಂದ ಅದು ಆಯತಕ್ಕಿಂತ ಹೆಚ್ಚಾಗಿ ವೃತ್ತದಂತೆ ಗೋಚರಿಸುತ್ತದೆ. ಅಂತಿಮವಾಗಿ, ಇದು alignItems ಅನ್ನು 'ಸೆಂಟರ್' ಗೆ ಹೊಂದಿಸುತ್ತದೆ, ಇದರಿಂದಾಗಿ ಅದರೊಳಗಿನ ಪಠ್ಯವು ಲಂಬವಾಗಿ ಮತ್ತು ಅಡ್ಡಲಾಗಿ ಕೇಂದ್ರೀಕೃತವಾಗಿರುತ್ತದೆ.
ರಿಯಾಕ್ಟ್‌ನಲ್ಲಿ ಬಟನ್‌ಗಳನ್ನು ಹೊಂದಿಸಿ
ರಿಯಾಕ್ಟ್ ನೇಟಿವ್‌ನಲ್ಲಿ ಕೆಲವು ವಿಭಿನ್ನ ರೀತಿಯ ಬಟನ್‌ಗಳಿವೆ:
ಬಟನ್
ಪಠ್ಯ ಇನ್ಪುಟ್
ರೇಡಿಯೋ ಬಟನ್
ಚೆಕ್ಬಾಕ್ಸ್
ಗುಂಡಿಗಳಿಗೆ ಶೈಲಿಗಳನ್ನು ಹೇಗೆ ನೀಡುವುದು
ರಿಯಾಕ್ಟ್ ನೇಟಿವ್‌ನಲ್ಲಿ ಬಟನ್‌ಗಳಿಗೆ ಶೈಲಿಗಳನ್ನು ನೀಡಲು ಕೆಲವು ಮಾರ್ಗಗಳಿವೆ.
ಸ್ಟೈಲ್‌ಶೀಟ್ ಘಟಕವನ್ನು ಬಳಸುವುದು ಒಂದು ಮಾರ್ಗವಾಗಿದೆ. ನೀವು ಸ್ಟೈಲ್ ಆಬ್ಜೆಕ್ಟ್‌ನಲ್ಲಿ ಸ್ಟೈಲ್‌ಶೀಟ್ ಕಾಂಪೊನೆಂಟ್‌ನ ಕ್ರಿಯೇಟ್() ವಿಧಾನಕ್ಕೆ ಎರಡನೇ ಆರ್ಗ್ಯುಮೆಂಟ್ ಆಗಿ ರವಾನಿಸಬಹುದು. ಶೈಲಿಯ ವಸ್ತುವು ಫಾಂಟ್, ಬಣ್ಣ ಮತ್ತು ಹಿನ್ನೆಲೆ ಬಣ್ಣಕ್ಕಾಗಿ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಒಳಗೊಂಡಿರಬಹುದು.
ಬಟನ್ ಘಟಕವನ್ನು ಬಳಸುವುದು ಇನ್ನೊಂದು ಮಾರ್ಗವಾಗಿದೆ. ಬಟನ್ ಕಾಂಪೊನೆಂಟ್‌ನ ಕ್ರಿಯೇಟ್() ವಿಧಾನಕ್ಕೆ ಎರಡನೇ ಆರ್ಗ್ಯುಮೆಂಟ್ ಆಗಿ ನೀವು ಶೈಲಿಯ ವಸ್ತುವಿನಲ್ಲಿ ರವಾನಿಸಬಹುದು. ಶೈಲಿಯ ವಸ್ತುವು ಫಾಂಟ್, ಬಣ್ಣ ಮತ್ತು ಹಿನ್ನೆಲೆ ಬಣ್ಣಕ್ಕಾಗಿ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಒಳಗೊಂಡಿರಬಹುದು.
