Android बॉटमशीट व्यवहार के लिए एक रिएक्टिव नेटिव रैपर
प्रतिक्रिया-देशी-नीचे-चादर-व्यवहार
android के लिए प्रतिक्रिया-देशी आवरण बॉटमशीटबिहेवियर , समर्थन करता है फ्लोटिंग एक्शन बटन .
डेमो
Google मानचित्र gif कार्यान्वयन देखें
v1.0.0
यह प्रमुख रिलीज़ v1.0.0 एंकर स्थिति का समर्थन करता है, जिसका अर्थ है कि आपके पास संक्षिप्त और विस्तारित के बीच एक मध्य स्थिति हो सकती है।
प्रतिक्रिया देशी-नोडमीडिया क्लाइंट
यह संस्करण अब कस्टम बॉटमशीट व्यवहार कार्यान्वयन का उपयोग करता है miguelhincapie/CustomBottomSheetBehavior जो मूल रूप से मूल डिजाइन-समर्थन से एक कांटा है, लेकिन लंगर राज्य समर्थन और रंग प्रबंधन के साथ, भले ही कस्टम कार्यान्वयन है, पुराने संस्करण को पहले की तरह काम करना चाहिए, और आप लंगर की स्थिति को अक्षम भी कर सकते हैं |_+_| प्रोप जो डिफ़ॉल्ट रूप से अक्षम है।
अवयव
इस पैकेज में निम्नलिखित घटक शामिल हैं:
- समन्वयक लेआउट
- बॉटमशीटबिहेवियर
- फ्लोटिंग एक्शन बटन
- मर्ज किए गए ऐपबार लेआउट
- स्क्रॉलिंग ऐपबार लेआउट
- बैकड्रॉपबॉटमशीट
- बॉटमशीट हैडर
टिप्पणी हम कुछ एंड्रॉइड कोर घटकों को उजागर करते हैं जैसे |_+_|, |_+_|, |_+_|, लेकिन वे सामान्य प्रयोजन के लिए नहीं हैं, और यह इस पुस्तकालय के संदर्भ से बाहर काम नहीं कर सकता है, इसलिए अपने जोखिम पर उपयोग करें।
आईओएस वैकल्पिक
यदि आप कुछ आईओएस विकल्प सोच रहे हैं, तो मैं अत्यधिक अनुशंसा करता हूं प्रतिक्रिया-देशी-बातचीत करने योग्य द्वारा विक्स , आप उनके Google मानचित्र दृष्टिकोण को देख सकते हैं यहाँ , जिसे शुरू करना बहुत आसान है।
स्थापित करना
|_+_|
आरएनपीएम के साथ स्थापित करें
|_+_|
हाथ से स्थापित करें
वर्तमान फाइलों को निम्नानुसार संपादित करें।
एंड्रॉइड/सेटिंग्स.ग्रेडल
|_+_|android/ऐप/build.gradle
|_+_|मुख्य अनुप्रयोग.java
|_+_|प्रयोग
आपको अपने व्यू को |_+_| में लपेटना होगा इसे काम करने के लिए।
|_+_|टिप्पणी सुनिश्चित करें कि आपके व्यू में |_+_| है कंटेनर को प्रस्तुत करते समय कुछ बगों को रोकने के लिए स्टाइल।
अवयव क्रम
आपको इस घटक क्रम का पालन करना चाहिए।
टिक टीएसी को पैर की अंगुली एंड्रॉयड स्टूडियो|_+_|
आयोजन
वर्तमान बॉटम शीट स्थिति या ऑफ़सेट प्राप्त करने के लिए, आप |_+_| सुन सकते हैं या |_+_| क्रमश।
|_+_|AppBarLayouts
हम कस्टम व्यवहार वाले कुछ कस्टम AppBars प्रदान करते हैं, वे |_+_| और दृश्यता को टॉगल करें, दोनों AppBars StatusBar पृष्ठभूमि को भी प्रबंधित कर सकते हैं।
वर्तमान में, AppBars केवल |_+_| का समर्थन करता है एक बच्चे के रूप में, कस्टम दृश्य प्रस्तुत करने का प्रयास करने में आपको कुछ परेशानी हो सकती है।
स्क्रॉलिंग ऐपबार लेआउट
जब आप बॉटमशीट को खींचना शुरू करते हैं तो यह व्यवहार स्टेटसबार पृष्ठभूमि को छुपाता है और पारदर्शी पर सेट करता है, और जब बॉटमशीट वापस ढह गई स्थिति में वापस आ जाती है, तो स्टेटसबार बैकग्राउंड कलर को |_+_| सहारा।
मर्ज किए गए ऐपबार लेआउट
MergedAppBarLayout व्यवहार तब प्रकट होता है जब बॉटमशीट एंकर स्थिति (या यदि आप एंकरएनेबल्ड का उपयोग नहीं कर रहे हैं तो विस्तारित स्थिति) तक पहुँच जाता है। जब बॉटमशीट MergedAppBar के ऊपर आ रही है, तो यह आंशिक रूप से ToolbarAndroid की ऊंचाई को सेट कर देगा जिससे |_+_| प्रॉप, और जब बॉटमशीट पूरी तरह से विस्तारित हो जाती है, तो यह टूलबार एंड्रॉइड को |_+_| के साथ सेट करता है सहारा।
|_+_| 
पारभासी ऐप बार्स
दोनों AppBars पारभासी स्थिति पट्टी का समर्थन करते हैं, आप |_+_| के साथ सक्षम कर सकते हैं प्रॉप, जो मूल रूप से शीर्ष मार्जिन और जोड़ देगा नहीं पारभासी को ही बदलें, आपको पारभासी को सीधे प्रतिक्रिया-देशी StatusBar घटक पर संभालना चाहिए।
फ्लोटिंग एक्शन बटन
यदि आप फ़्लोटिंगएक्शनबटन का उपयोग कर रहे हैं, तो |_+_| प्रोप स्वचालित रूप से बॉटमशीटबिहेवियर से कनेक्ट हो जाएगा, ताकि जब यह खींच रहा हो तो इसका पालन किया जा सके।
|_+_|हालांकि, ऐसा करने से आप अभी भी इसे मैन्युअल रूप से कर सकते हैं।
|_+_|फ़्लोटिंगएक्शनबटन का एक कस्टम व्यवहार है जो MergedAppBarLayout के निकट पहुंचने पर छिप जाता है।
प्रतिक्रिया-देशी-वेक्टर-प्रतीक के लिए समर्थन
आप भी उपयोग कर सकते हैं प्रतिक्रिया-देशी-वेक्टर-प्रतीक फ़्लोटिंगएक्शनबटन पर, जो स्वचालित रूप से आपके लिए आइकन लोड करेगा।
|_+_|आप देख सकते हैं GoogleMapsView.js उदाहरण।
बैकड्रॉपबॉटमशीट
यह घटक बॉटमशीट व्यवहार के पीछे प्रस्तुत किया गया है, और जब बॉटमशीट खींच रहा है तो एक लंबन की तरह व्यवहार करता है। आपको एक निश्चित पास करना चाहिए |_+_| प्रॉप जो |_+_| से मेल खा सकता है एंकर स्थिति तक पहुँचने पर पूर्ण स्क्रीन दृश्य प्राप्त करने के लिए बॉटमशीट से प्रोप।
अमेज़न प्राइम एक्टिवेट डिवाइस
बॉटमशीट हैडर
यह घटक मूल पक्ष पर बॉटमशीट राज्यों के बीच रंग प्रबंधन को सार करता है, यह सभी और घटकों को पुनरावर्ती रूप से खोजेगा और बॉक्स के बाहर सब कुछ संभालता है।
NestedScrollView
यदि आप एंकर पॉइंट का उपयोग नहीं कर रहे हैं, और कुछ नेस्टेड स्क्रॉल जोड़ना चाहते हैं, तो आपको प्रतिक्रिया-देशी-नेस्टेड-स्क्रॉल-व्यू आपको नीचे की शीट के अंदर लगातार स्क्रॉल करने की अनुमति देता है।
टिप्पणी |_+_| केवल तभी उपयोगी है जब तुम हो नहीं एंकरपॉइंट का उपयोग करना।
NestedScrollView.js उदाहरण
एपीआई
बॉटमशीटबिहेवियर गुण
| प्रोप | विवरण | डिफ़ॉल्ट मान |
|---|---|---|
| राज्य | निचली शीट की स्थिति | 4 (STATE_COLLAPSED) |
| peekHeight | डीपी में पीक ऊंचाई मान | पचास |
| छिपाने योग्य | नीचे की शीट को छिपाने दें | गलत |
| लंगर सक्षम | सक्षम एंकर बिंदु | गलत |
| ऐंकर बिंदु | लंगर बिंदु जहां नीचे की शीट को ढहने और विस्तारित होने के बीच रहना चाहिए | 300 |
| ऊंचाई | ऊँचाई की छाया | 0 |
| onStateChange | कॉलबैक जब नीचे की शीट स्थिति बदली | |
| onSlide | कॉलबैक लगातार कॉल किया जाता है जबकि उपयोगकर्ता नीचे की शीट को खींच रहा है |
बॉटमशीटबिहेवियर स्टेट्स
| राज्य | विवरण |
|---|---|
| 1 | STATE_DRAGGING |
| 2 | STATE_SETTLING |
| 3 | STATE_EXPANDED |
| 4 | STATE_COLLAPSED |
| 5 | STATE_HIDDEN |
| 6 | STATE_ANCHOR_POINT |
बॉटमशीटबिहेवियर एक्शन
| तरीका | विवरण |
|---|---|
| setBottomSheetState | नीचे की शीट स्थिति सेट करता है |
फ़्लोटिंगएक्शनबटन गुण
| प्रोप | विवरण | डिफ़ॉल्ट मान |
|---|---|---|
| स्रोत | ड्रा करने योग्य एंड्रॉइड फ़ोल्डर के तहत ड्रा करने योग्य फ़ाइल | |
| autoAnchor | बॉटम शीट पर बटन को स्वचालित रूप से अटैच करता है | गलत |
| आइकन | प्रतिक्रिया-मूल-वेक्टर-आइकन नाम | |
| iconProvider | प्रतिक्रिया-मूल-वेक्टर-आइकन द्वारा प्रदान किया गया आइकन पैकेज | |
| iconColor | चिह्न का रंग | |
| iconColorExpand | बॉटमशीट हैडर द्वारा उपयोग किए जाने पर आइकन विस्तारित रंग | |
| पीछे का रंग | पीछे का रंग | |
| पृष्ठभूमि रंग विस्तारित | बॉटमशीट हैडर द्वारा उपयोग किया जाने वाला पृष्ठभूमि विस्तारित रंग | |
| छिपा हुआ | फ़्लोटिंगएक्शनबटन छुपाता है | गलत |
| तरंग प्रभाव | रिपल इफेक्ट को सक्षम करें | सच |
| ripplecolor | तरंग रंग | |
| ऊंचाई | ऊँचाई की छाया | 18 |
| onPress | स्पर्श जारी होने पर कॉलबैक कॉल किया जाता है |
फ़्लोटिंगएक्शनबटन क्रियाएं
| तरीका | विवरण |
|---|---|
| प्रदर्शन | यदि दृश्य पहले ही निर्धारित किया जा चुका है तो यह विधि बटन शो को एनिमेट करेगी |
| छिपाना | यदि दृश्य पहले ही निर्धारित किया जा चुका है तो यह विधि बटन छिपाने को एनिमेट करेगी |
| setAnchorId | नीचे की शीट पर बटन को एक तर्क के रूप में पारित करके संलग्न करता है (ऑटो एंकर सही होने पर कोई ज़रूरत नहीं है) |
स्क्रॉलिंगऐपबारलाउट गुण
| प्रोप | विवरण |
|---|---|
| ऊंचाई | स्क्रॉलिंगऐपबारलेआउट की ऊंचाई |
| statusBarColor | सक्रिय स्थिति बार रंग |
| पारदर्शी | स्टेटस बार के पीछे नहीं जाने के लिए AppBar पर टॉप मार्जिन जोड़ता है |
| barStyle | स्टेटस बार स्टाइल, (डिफ़ॉल्ट, लाइट-कंटेंट, डार्क-कंटेंट), जब स्क्रॉलिंगऐपबारलाउट मौजूद होता है |
| barStyleTransparent | स्टेटस बार स्टाइल, (डिफ़ॉल्ट, लाइट-कंटेंट, डार्क-कंटेंट), जिसका उपयोग तब किया जाता है जब स्क्रॉलिंगऐपबार लेआउट मौजूद नहीं होता है और स्टेटसबार पारदर्शी होता है |
MergedAppBarLayout गुण
| प्रोप | विवरण |
|---|---|
| ऊंचाई | स्क्रॉलिंगऐपबारलेआउट की ऊंचाई |
| मर्ज किए गए रंग | मर्ज किया गया रंग जब नीचे की शीट ToolbarAndroid के साथ ओवरले हो रही हो |
| toolbarColor | अंतिम टूलबार Android रंग जब नीचे की शीट पूरी तरह से विस्तारित हो जाती है |
| statusBarColor | नीचे की शीट का विस्तार होने पर सक्रिय स्थिति पट्टी का रंग |
| पारदर्शी | स्टेटस बार के पीछे नहीं जाने के लिए AppBar पर टॉप मार्जिन जोड़ता है |
| barStyle | स्टेटस बार स्टाइल, (डिफ़ॉल्ट, लाइट-कंटेंट, डार्क-कंटेंट), जब बॉटमशीट पूरी तरह से विस्तारित हो जाती है |
| barStyleTransparent | स्टेटस बार स्टाइल, (डिफ़ॉल्ट, लाइट-कंटेंट, डार्क-कंटेंट), जिसका उपयोग तब किया जाता है जब AppBar पारदर्शी होता है |
बॉटमशीट हैडर गुण
| प्रोप | विवरण |
|---|---|
| textcolorExpand | निचली शीट की स्थिति |
| पीछे का रंग | टकराने पर पृष्ठभूमि का रंग |
| पृष्ठभूमि रंग विस्तारित | एंकर या विस्तारित होने पर पृष्ठभूमि का रंग |
| onPress | हेडर टच जारी होने पर कॉलबैक कॉल किया गया |
विवरण डाउनलोड करें:
लेखक: cesardeazevedo
गिटहब: https://github.com/cesardeazevedo/react-native-bottom-sheet-behavior