મૂળ પ્રતિક્રિયા માટે એક મોડલ ઘટક

બ્લોગ

મૂળ પ્રતિક્રિયા માટે એક મોડલ ઘટક

પ્રતિક્રિયા-મૂળ-મોડલબોક્સ

એક પ્રતિક્રિયા મૂળ ઘટક, સરળ, સંપૂર્ણપણે વૈવિધ્યપૂર્ણ, 'સ્વાઇપ ડાઉન ટુ ક્લોઝ' સુવિધાનો અમલ.



તમારા સુંદર મોડલમાં IAP લાગુ કરવા માંગો છો?

પૂર્વાવલોકન



એઝ્યુર ડેટા એક્સપ્લોરર ડેશબોર્ડ્સ

સ્થાપિત કરો

npm install react-native-modalbox@latest --save

ઉદાહરણ

તપાસો index.js ઉદાહરણ ફોલ્ડરમાં.



આવૃત્તિ નોંધ

પ્રતિક્રિયા-મૂળ પ્રતિક્રિયા-મૂળ-મોડલબોક્સ
<= 0.57 <= 1.6.0
> = 0.58 > = 1.6.1

ગુણધર્મો

આધાર મૂળભૂત પ્રકાર વર્ણન
ખુલ્લું છે ખોટું bool મોડલ ખોલો/બંધ કરો, વૈકલ્પિક, તમે તેના બદલે ખુલ્લી/બંધ પદ્ધતિઓનો ઉપયોગ કરી શકો છો
અક્ષમ છે ખોટું bool મોડલ પર કોઈપણ ક્રિયાને અક્ષમ કરો (ખોલો, બંધ કરો, સ્વાઇપ કરો)
backdrop PressToClose સાચું bool બેકડ્રોપ પર દબાવીને મોડલ બંધ કરો
સ્વાઇપટોક્લોઝ સાચું bool | _+_ | પર સેટ કરો સુવિધાને બંધ કરવા માટે નીચે સ્વાઇપ કરવા સક્ષમ કરો
સ્વાઇપ થ્રેશોલ્ડ પચાસ true મોડલ બંધ કરવા માટે પિક્સેલમાં પહોંચવાની થ્રેશોલ્ડ
સ્વાઇપ એરિયા - number સ્વાઇપ કરી શકાય તેવા વિસ્તારની પિક્સેલ્સમાં heightંચાઇ, મૂળભૂત રીતે વિન્ડોની heightંચાઇ
સ્થિતિ કેન્દ્ર number | _+_ | નો ઉપયોગ કરીને મોડલની સ્થિતિને નિયંત્રિત કરો અથવા | _+_ | અથવા | _+_ |
પ્રવેશ નીચે string મોડલ એન્ટ્રી પોઝિશન | _+_ | નિયંત્રિત કરો અથવા | _+_ |
પૃષ્ઠભૂમિ સાચું top મોડલ પાછળ બેકડ્રોપ દર્શાવો
બેકડ્રોપ અસ્પષ્ટતા 0.5 center પૃષ્ઠભૂમિની અસ્પષ્ટતા
પૃષ્ઠભૂમિ રંગ કાળો bottom પૃષ્ઠભૂમિ પૃષ્ઠભૂમિનો રંગ
પૃષ્ઠભૂમિ સામગ્રી નલ string બેકડ્રોપમાં એક તત્વ ઉમેરો (ઉદાહરણ તરીકે બંધ બટન)
એનિમેશન સમયગાળો 400 top એનિમેશનનો સમયગાળો
હળવું Easing.elastic (0.8) bottom મોડલ એનિમેશન ખોલવા માટે સરળ કાર્ય લાગુ
backButtonClose ખોટું bool (ફક્ત એન્ડ્રોઇડ) બેક બટન ઇવેન્ટ પ્રાપ્ત કરતી વખતે મોડલ બંધ કરો
શરૂ કરો ખોટું number પ્રથમ માઉન્ટ પર મોડલને એનિમેશન વિના ખુલ્લું દેખાવાની મંજૂરી આપો
કવરસ્ક્રીન ખોટું string RN | _+_ | નો ઉપયોગ કરશે ઘટક વંશવેલોમાં જ્યાં પણ મોડલ માઉન્ટ થયેલ હોય ત્યાં સમગ્ર સ્ક્રીનને આવરી લેવા માટે ઘટક
કીબોર્ડ ટોપ ઓફસેટ ios: 22, android: 0 ReactElement આ પ્રોપર્ટી મોડલને આઇઓએસ સ્ટેટસ બારને આવરી લેવાથી રોકે છે જ્યારે મોડલ સ્ક્રોલ કરી રહ્યું હોય કારણ કે કીબોર્ડ ખુલી રહ્યું છે
નેટીવ ડ્રાઈવરનો ઉપયોગ કરો સાચું number મોડલને એનિમેટ કરવા માટે હાર્ડવેર એક્સિલરેશનને સક્ષમ કરે છે. મહેરબાની કરીને નોંધ કરો કે આને સક્ષમ કરવાથી એનિમેશન કરતી વખતે વિચિત્ર રીતે કેટલીક ચમક આવી શકે છે

ઘટનાઓ

આધાર પરમ વર્ણન
બંધ - જ્યારે મોડલ બંધ હોય અને એનિમેશન થાય
ઓપન કરેલ - જ્યારે મોડલ ખુલ્લું હોય અને એનિમેશન થાય
onClosingState રાજ્ય | _+_ | જ્યારે સ્વાઇપ ટુ ક્લોઝ ફીચરની સ્થિતિ બદલાઈ ગઈ હોય (મોડલની સામગ્રી બદલવા માટે ઉપયોગી, ઉદાહરણ તરીકે સંદેશ દર્શાવો)

પદ્ધતિઓ

આ પદ્ધતિઓ વૈકલ્પિક છે, તમે તેના બદલે isOpen મિલકતનો ઉપયોગ કરી શકો છો

આધાર પરમ વર્ણન
ખુલ્લા - મોડલ ખોલો
બંધ - મોડલ બંધ કરો

વિગતો ડાઉનલોડ કરો:

લેખક: મહત્તમ 15

જાવામાં બીજા ક્લાસમાંથી મેથડને કેવી રીતે કૉલ કરવી

સ્ત્રોત કોડ: https://github.com/maxs15/react-native-modalbox

#react #react-native #mobile-apps