Akwai matsala tare da amsa maɓallan na asali waɗanda ke da wahalar gani da fahimta. Lokacin da ka ƙirƙiri maɓalli a cikin React Native, kuna da zaɓi don ƙirƙirar maɓallin zagaye ko murabba'i. Koyaya, lokacin da kuke amfani da waɗannan maɓallan a cikin app ɗinku, yana iya zama da wahala a ga wane zagaye ne kuma wane murabba'i ne. Wannan na iya haifar da rudani da matsaloli lokacin da kuke ƙoƙarin amfani da maɓallan a cikin app ɗin ku.
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 } });
An rubuta wannan lambar a cikin React Native kuma ya ƙirƙiri maɓalli da ke cewa "Danna Ni." Lokacin da aka danna maɓallin, ana yin wani aiki.
Layin farko yana shigo da dakunan karatu na 'Yan Asalin React da React.
Layi na biyu ya haifar da wani bangare mai suna App. Wannan bangaren zai sanya maɓalli.
Layi na uku ya mayar da bangaren App. Bangaren App ɗin ya ƙunshi nau'in TouchableOpacity, wanda zai sanya maɓalli. Maɓallin yana da salon styles.button, wanda aka bayyana a cikin layi na hudu. Rubutun maɓallin zai kasance yana da salon styles.text, wanda aka bayyana a cikin layi na biyar.
Layukan na shida da na bakwai sun bayyana salo don akwati da abubuwan maɓalli, bi da bi. Abun akwati zai sami justifyContent da daidaita abubuwan da aka saita zuwa 'tsakiya', ta yadda maɓallin zai kasance a tsakiya akan allon. Maɓallin maɓallin zai sami bangon launi na '#4ba37b' da faɗin pixels 100. Hakanan zai sami iyakaRadius saita zuwa 50, ta yadda zai bayyana azaman da'irar maimakon murabba'i. A ƙarshe, za ta sami alignItems saita zuwa 'tsakiya', ta yadda rubutun da ke cikinsa ya kasance a tsakiya a tsaye da a kwance.
saita Buttons a cikin React
Akwai 'yan nau'ikan maɓalli daban-daban a cikin React Native:
Button
TextInput
RadioButton
Akwati
Yadda ake ba da salo ga maɓalli
Akwai 'yan hanyoyi don ba da salo ga maɓalli a cikin React Native.
Hanya ɗaya ita ce amfani da bangaren StyleSheet. Kuna iya wucewa a cikin wani abu mai salo azaman hujja ta biyu zuwa hanyar ƙirƙirar () bangaren StyleSheet. Abun salon yana iya ƙunsar kaddarorin rubutu, launi, da launi na bango.
Wata hanya ita ce ta amfani da bangaren Button. Kuna iya wucewa a cikin wani abu mai salo azaman hujja ta biyu zuwa hanyar ƙirƙirar () bangaren Button. Abun salon yana iya ƙunsar kaddarorin rubutu, launi, da launi na bango.