ઉકેલાયેલ: મૂળ સ્થિતિ સંપૂર્ણ કેન્દ્ર પર પ્રતિક્રિયા આપો

રિએક્ટ નેટિવ પોઝિશન એબ્સોલ્યુટ સેન્ટર સંબંધિત મુખ્ય સમસ્યા એ છે કે રિએક્ટ નેટિવ એપ્લિકેશનનું સંપૂર્ણ કેન્દ્ર નક્કી કરવું મુશ્કેલ બની શકે છે. જો તમારે ગણતરીઓ કરવા અથવા લેઆઉટ દોરવા માટે આ માહિતીનો ઉપયોગ કરવાની જરૂર હોય તો આ સમસ્યારૂપ બની શકે છે.

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 નેટિવ લાઇબ્રેરીઓ આયાત કરે છે. એપ ક્લાસ કમ્પોનન્ટ ક્લાસમાંથી વારસામાં મળે છે અને રેન્ડર મેથડ “હેલો વર્લ્ડ!” સાથે વ્યુ આપે છે. સંદેશ એપ્લિકેશન ક્લાસ નિકાસ કરવામાં આવે છે જેથી તેનો ઉપયોગ અન્ય ફાઇલોમાં થઈ શકે.

સંપૂર્ણ સ્થિત થયેલ દૃશ્યને ડાબે/જમણે મધ્યમાં સંરેખિત કરો

આ પ્રશ્નનો કોઈ ચોક્કસ જવાબ નથી કારણ કે તે ચોક્કસ ઉપયોગના કેસ પર આધારિત છે. સામાન્ય રીતે, એક સંપૂર્ણ સ્થિત થયેલ દૃશ્યને ડાબે અથવા જમણે કેન્દ્રમાં ગોઠવવાનું alignToCenter ગુણધર્મનો ઉપયોગ કરીને કરી શકાય છે.

ફ્લેક્સબોક્સ

રિએક્ટ નેટિવમાં, ફ્લેક્સબોક્સ એ લેઆઉટ કન્ટેનર છે જે તમને લવચીક અને અનુકૂલનશીલ વપરાશકર્તા ઇન્ટરફેસ બનાવવાની મંજૂરી આપે છે. તે CSS flexbox જેવા જ સિદ્ધાંતો સાથે કામ કરે છે, પરંતુ તે React Native માં ઉપયોગ માટે ઑપ્ટિમાઇઝ કરેલ છે.

તમારી રીએક્ટ નેટિવ એપ્લિકેશનમાં ફ્લેક્સબોક્સનો ઉપયોગ કરવા માટે, તમારે પહેલા ફ્લેક્સ-પેકેજર મોડ્યુલનો સમાવેશ કરવાની જરૂર છે. પછી, જ્યારે તમારી એપ નાની કે મોટી સ્ક્રીન સાઇઝવાળા ઉપકરણ પર પ્રદર્શિત થાય ત્યારે તે કેવી રીતે વર્તે તે સ્પષ્ટ કરવા માટે તમે flexbox પ્રોપર્ટીનો ઉપયોગ કરી શકો છો:

'react-નેટિવ' માંથી { FlexBox } આયાત કરો; const એપ્લિકેશન = () => ( હેલો, વિશ્વ! ); નિકાસ ડિફૉલ્ટ એપ્લિકેશન;

જો તમે ફ્લેક્સબોક્સને સંપૂર્ણ રીતે અક્ષમ કરવા માંગો છો, તો તમે નો-ફ્લેક્સ ગુણધર્મનો ઉપયોગ કરી શકો છો:

'react-નેટિવ' માંથી { FlexBox } આયાત કરો; const એપ્લિકેશન = () => ( હેલો, વિશ્વ! ); નિકાસ ડિફૉલ્ટ એપ્લિકેશન;