May problema sa mga react native na button na maaaring mahirap makita at maunawaan. Kapag gumawa ka ng button sa React Native, may opsyon kang gumawa ng round o square button. Gayunpaman, kapag ginamit mo ang mga button na ito sa iyong app, maaaring mahirap makita kung alin ang bilog at kung alin ang parisukat. Maaari itong humantong sa pagkalito at mga problema kapag sinusubukan mong gamitin ang mga button sa iyong app.
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 } });
Ang code na ito ay nakasulat sa React Native at gumagawa ng button na nagsasabing "Click Me." Kapag ang pindutan ay na-click, ang isang aksyon ay ginanap.
Ini-import ng unang linya ang mga library ng React at React Native.
Ang pangalawang linya ay lumilikha ng isang bahagi na tinatawag na App. Ang bahaging ito ay magbibigay ng isang pindutan.
Ang ikatlong linya ay nagre-render ng bahagi ng App. Ang bahagi ng App ay naglalaman ng isang TouchableOpacity na elemento, na magre-render bilang isang button. Ang button ay may istilo ng styles.button, na tinukoy sa ikaapat na linya. Ang text ng button ay magkakaroon ng istilo ng styles.text, na tinukoy sa ikalimang linya.
Tinutukoy ng ikaanim at ikapitong linya ang mga istilo para sa mga elemento ng lalagyan at button, ayon sa pagkakabanggit. Ang elemento ng container ay magkakaroon ng justifyContent at alignItems na nakatakda sa 'gitna', upang ang button ay maigitna sa screen. Ang elemento ng button ay magkakaroon ng backgroundColor na '#4ba37b' at isang lapad na 100 pixels. Magkakaroon din ito ng borderRadius na nakatakda sa 50, upang ito ay lumitaw bilang isang bilog sa halip na isang parihaba. Sa wakas, magkakaroon ito ng alignItems na nakatakda sa 'gitna', upang ang teksto sa loob nito ay nakasentro nang patayo at pahalang.
itakda ang Mga Pindutan sa React
Mayroong ilang iba't ibang uri ng mga button sa React Native:
butones
TextInput
RadioButton
checkbox
Paano magbigay ng mga istilo sa mga pindutan
Mayroong ilang mga paraan upang magbigay ng mga istilo sa mga button sa React Native.
Ang isang paraan ay ang paggamit ng bahagi ng StyleSheet. Maaari mong ipasa ang isang style object bilang pangalawang argumento sa paraan ng create() na bahagi ng StyleSheet. Ang style object ay maaaring maglaman ng mga katangian para sa font, kulay, at kulay ng background.
Ang isa pang paraan ay ang paggamit ng Button component. Maaari mong ipasa ang isang style object bilang pangalawang argumento sa paraan ng create() ng component ng Button. Ang style object ay maaaring maglaman ng mga katangian para sa font, kulay, at kulay ng background.
