React Native'i absoluutse keskpunktiga seotud peamine probleem on see, et React Native'i rakenduse absoluutset keskpunkti võib olla keeruline määrata. See võib olla problemaatiline, kui peate seda teavet kasutama arvutuste tegemiseks või paigutuste joonistamiseks.
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;
See kood impordib React ja React Native teegid. Rakenduse klass pärib klassist Component ja renderdamismeetod tagastab vaate „Tere maailm!” sõnum. Rakenduse klass eksporditakse, et seda saaks kasutada teistes failides.
Joonda absoluutse positsioneeritud vaade vasakule/paremale keskele
Sellele küsimusele ei ole konkreetset vastust, kuna see sõltub konkreetsest kasutusjuhtumist. Üldiselt saab absoluutse positsioneeritud vaate joondada vasakule või paremale keskele atribuudi alignToCenter abil.
Flexbox
React Native'is on Flexbox paigutuskonteiner, mis võimaldab luua paindlikke ja kohanduvaid kasutajaliideseid. See töötab samadel põhimõtetel nagu CSS flexbox, kuid see on optimeeritud kasutamiseks React Native'is.
Flexboxi kasutamiseks oma rakenduses React Native peate esmalt kaasama flex-packeri mooduli. Seejärel saate atribuudi flexbox abil määrata, kuidas teie rakendus peaks käituma, kui seda kuvatakse väiksema või suurema ekraanisuurusega seadmes.
import { FlexBox } 'react-native'ist; const App = () => (
Kui soovite Flexboxi täielikult keelata, saate kasutada atribuuti no-flex:
import { FlexBox } 'react-native'ist; const App = () => (
