ဖြေရှင်းထားသည်- မူလခလုတ်ကို ဝိုင်းပြီး တုံ့ပြန်ပါ။

မြင်နိုင် နားလည်ရန် ခက်ခဲသော တုံ့ပြန်မှု ဇာတိခလုတ်များနှင့် ပြဿနာရှိသည်။ React Native တွင် ခလုတ်တစ်ခုကို ဖန်တီးသောအခါ၊ အဝိုင်း သို့မဟုတ် စတုရန်းခလုတ်တစ်ခု ဖန်တီးရန် ရွေးချယ်ခွင့်ရှိသည်။ သို့သော်လည်း သင့်အက်ပ်တွင် ဤခလုတ်များကို သင်အသုံးပြုသောအခါ၊ မည်သည့်အရာသည် အဝိုင်းဖြစ်ပြီး မည်သည့်စတုရန်းဖြစ်သည်ကို သိရန်ခက်ခဲနိုင်သည်။ ၎င်းသည် သင့်အက်ပ်ရှိ ခလုတ်များကို အသုံးပြုရန် ကြိုးစားသောအခါတွင် ရှုပ်ထွေးမှုများနှင့် ပြဿနာများကို ဖြစ်ပေါ်စေနိုင်သည်။

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

ဤကုဒ်ကို React Native ဖြင့်ရေးထားပြီး “Click Me” ဟုပြောသော ခလုတ်တစ်ခုကို ဖန်တီးထားသည်။ ခလုတ်ကို နှိပ်လိုက်သောအခါ၊ လုပ်ဆောင်ချက်တစ်ခု လုပ်ဆောင်သည်။

ပထမစာကြောင်းသည် React နှင့် React Native စာကြည့်တိုက်များကို တင်သွင်းသည်။

ဒုတိယစာကြောင်းသည် App ဟုခေါ်သော အစိတ်အပိုင်းတစ်ခုကို ဖန်တီးသည်။ ဤအစိတ်အပိုင်းသည် ခလုတ်တစ်ခု ပေါ်လာလိမ့်မည်။

တတိယစာကြောင်းသည် App အစိတ်အပိုင်းကို ပြန်ဆိုသည်။ အက်ပ် အစိတ်အပိုင်းတွင် TouchableOpacity ဒြပ်စင်ပါရှိသည်၊ ၎င်းသည် ခလုတ်တစ်ခုအနေဖြင့် တင်ဆက်ပေးမည်ဖြစ်သည်။ ခလုတ်တွင် စတုထ္ထလိုင်းတွင် သတ်မှတ်ထားသည့် styles.button တစ်ခုရှိသည်။ ခလုတ်၏ စာသားတွင် ပဉ္စမစာကြောင်းတွင် သတ်မှတ်ထားသော styles.text စတိုင်တစ်ခု ရှိပါမည်။

ဆဋ္ဌမနှင့် သတ္တမလိုင်းများသည် ကွန်တိန်နာနှင့် ခလုတ်ဒြပ်စင်များအတွက် စတိုင်များကို အသီးသီးသတ်မှတ်သည်။ ကွန်တိန်နာဒြပ်စင်တွင် justifyContent နှင့် alignItems များကို 'center' ဟုသတ်မှတ်ထားမည်ဖြစ်ပြီး၊ သို့မှသာ ခလုတ်သည် စခရင်ပေါ်တွင် ဗဟိုပြုမည်ဖြစ်သည်။ ခလုတ်ဒြပ်စင်တွင် '#4ba37b' ၏ နောက်ခံအရောင်နှင့် အကျယ် 100 ပစ်ဇယ်ရှိပါမည်။ ၎င်းတွင် borderRadius ကိုလည်း 50 ဟုသတ်မှတ်ထားမည်ဖြစ်ပြီး၊ သို့မှသာ ၎င်းသည် စတုဂံမဟုတ်ဘဲ စက်ဝိုင်းပုံသဏ္ဍန်ဖြစ်သည်။ နောက်ဆုံးတွင်၊ ၎င်းတွင် alignItems များကို 'center' ဟုသတ်မှတ်ထားမည်ဖြစ်ပြီး၊ ထို့ကြောင့်၎င်းအတွင်းရှိစာသားကိုဒေါင်လိုက်နှင့်အလျားလိုက်ဗဟိုပြုထားသည်။

React တွင် Buttons များကိုသတ်မှတ်ပါ။

React Native တွင် မတူညီသော ခလုတ်အချို့ ရှိပါသည်။

ကြယ်သီး

စာသားထည့်သွင်းခြင်း။

ရေဒီယိုခလုတ်

checkbox

ခလုတ်များကို စတိုင်လ်များ မည်သို့ပေးမည်နည်း။

React Native တွင် ခလုတ်များကို ပုံစံများ ပေးဆောင်ရန် နည်းလမ်းအချို့ ရှိပါသည်။

တစ်နည်းမှာ StyleSheet အစိတ်အပိုင်းကို အသုံးပြုရန်ဖြစ်သည်။ StyleSheet အစိတ်အပိုင်း၏ ဖန်တီးမှု() နည်းလမ်းသို့ ဒုတိယအငြင်းအခုံအဖြစ် စတိုင်အရာဝတ္တုကို သင်ဖြတ်သန်းနိုင်သည်။ စတိုင်အရာဝတ္ထုတွင် ဖောင့်၊ အရောင်နှင့် နောက်ခံအရောင်အတွက် ဂုဏ်သတ္တိများ ပါဝင်နိုင်သည်။

နောက်တစ်နည်းမှာ Button အစိတ်အပိုင်းကို အသုံးပြုရန်ဖြစ်သည်။ Button အစိတ်အပိုင်း၏ create() method သို့ ဒုတိယအငြင်းအခုံအဖြစ် စတိုင်အရာဝတ္ထုတစ်ခုကို သင်ဖြတ်သန်းနိုင်သည်။ စတိုင်အရာဝတ္ထုတွင် ဖောင့်၊ အရောင်နှင့် နောက်ခံအရောင်အတွက် ဂုဏ်သတ္တိများ ပါဝင်နိုင်သည်။