React Native အပလီကေးရှင်းတစ်ခု၏ ပကတိဗဟိုချက်ကို ဆုံးဖြတ်ရန် ခက်ခဲသော တုံ့ပြန်မှု ဇာတိအနေအထား အကြွင်းမဲ့ဗဟိုဌာနနှင့် ပတ်သက်သည့် အဓိကပြဿနာဖြစ်သည်။ တွက်ချက်မှုများလုပ်ဆောင်ရန် သို့မဟုတ် အပြင်အဆင်များဆွဲရန်အတွက် သင်သည် ဤအချက်အလက်ကိုအသုံးပြုရန် လိုအပ်ပါက ၎င်းသည် ပြဿနာရှိနိုင်သည်။
import React, { Component } from 'react'; import { View, Text } from 'react-native'; class App extends Component { render() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Hello World!</Text> </View> ); } } export default App;
ဤကုဒ်သည် React နှင့် React Native စာကြည့်တိုက်များကို တင်သွင်းသည်။ App class သည် Component class မှ အမွေဆက်ခံပြီး render method သည် “Hello World!” ဖြင့် view တစ်ခုကို ပြန်ပေးပါသည်။ သတင်းစကား။ App class ကို ထုတ်ယူထားသောကြောင့် အခြားဖိုင်များတွင် အသုံးပြုနိုင်ပါသည်။
အကြွင်းမဲ့နေရာချထားသော View ကို ဘယ်/ညာ ဗဟိုသို့ ချိန်ညှိပါ။
ဤမေးခွန်းအတွက် သီးခြားအသုံးပြုမှုအခြေအနေပေါ်မူတည်၍ တိကျသောအဖြေမရှိပါ။ ယေဘူယျအားဖြင့်၊ ဘယ်ဘက် သို့မဟုတ် ညာဘက်ဗဟိုသို့ အကြွင်းမဲ့နေရာချထားသော မြင်ကွင်းကို alignToCenter ပိုင်ဆိုင်မှုကို အသုံးပြု၍ ချိန်ညှိနိုင်သည်။
Flexbox
React Native တွင်၊ Flexbox သည် လိုက်လျောညီထွေရှိပြီး လိုက်လျောညီထွေရှိသော အသုံးပြုသူအင်တာဖေ့စ်များကို ဖန်တီးနိုင်စေမည့် အပြင်အဆင်ကွန်တိန်နာတစ်ခုဖြစ်သည်။ ၎င်းသည် CSS flexbox ကဲ့သို့တူညီသောမူများနှင့်အလုပ်လုပ်သည်၊ သို့သော်၎င်းကို React Native တွင်အသုံးပြုရန်အတွက်အကောင်းဆုံးဖြစ်သည်။
သင်၏ React Native အက်ပ်တွင် Flexbox ကိုအသုံးပြုရန်၊ သင်သည် flex-packager module ကို ဦးစွာထည့်သွင်းရန်လိုအပ်သည်။ ထို့နောက်၊ သေးငယ်သော သို့မဟုတ် ပိုကြီးသောစခရင်အရွယ်အစားရှိသော စက်ပစ္စည်းတစ်ခုပေါ်တွင် သင့်အက်ပ်ကိုပြသသည့်အခါ သင့်အက်ပ်သည် မည်သို့ပြုမူသင့်သည်ကို သတ်မှတ်ရန် flexbox ပိုင်ဆိုင်မှုကို သင်အသုံးပြုနိုင်သည်-
'react-native' မှ { FlexBox } ကို တင်သွင်းပါ။ const App = () => (
Flexbox ကို လုံးဝပိတ်ချင်ရင်၊ no-flex ပိုင်ဆိုင်မှုကို သုံးနိုင်ပါတယ်။
'react-native' မှ { FlexBox } ကို တင်သွင်းပါ။ const App = () => (