क्षैतिज scrollview स्नैप करना प्रतिक्रिया देशी

Question

हाय मैं gif नीचे की तरह कड़ी

Check This Gif

केंद्र के लिए scrollview तस्वीर प्राप्त करने के लिए कोशिश कर रहा हूँ लेकिन ऐसा करने में असमर्थ। इसे प्राप्त करने के लिए मेरा प्रतिक्रिया देशी कोड निम्नलिखित है।

या एंड्रॉइड जैसे स्क्रॉलव्यू तत्वों की विशेष अनुक्रमणिका को स्क्रॉल करने के लिए कोई तरीका है?

किसी भी मदद की सराहना की जाएगी। अग्रिम धन्यवाद

  <ScrollView 

            style={[styles.imgContainer,{backgroundColor:colorBg,paddingLeft:20}]} 
            automaticallyAdjustInsets={false} 

            horizontal={true} 
            pagingEnabled={true} 
            scrollEnabled={true} 
            decelerationRate={0} 
            snapToAlignment='center' 
            snapToInterval={DEVICE_WIDTH-100} 
            scrollEventThrottle={16} 
            onScroll={(event) => { 
            var contentOffsetX=event.nativeEvent.contentOffset.x; 
            var contentOffsetY=event.nativeEvent.contentOffset.y; 

            var cellWidth = (DEVICE_WIDTH-100).toFixed(2); 
            var cellHeight=(DEVICE_HEIGHT-200).toFixed(2); 

            var cellIndex = Math.floor(contentOffsetX/ cellWidth); 

            // Round to the next cell if the scrolling will stop over halfway to the next cell. 
            if ((contentOffsetX- (Math.floor(contentOffsetX/cellWidth) * cellWidth)) > cellWidth) { 
            cellIndex++; 
            } 

            // Adjust stopping point to exact beginning of cell. 
            contentOffsetX = cellIndex * cellWidth; 
            contentOffsetY= cellIndex * cellHeight; 

            event.nativeEvent.contentOffsetX=contentOffsetX; 
            event.nativeEvent.contentOffsetY=contentOffsetY; 

            // this.setState({contentOffsetX:contentOffsetX,contentOffsetY:contentOffsetY}); 



            console.log('cellIndex:'+cellIndex); 

            console.log("contentOffsetX:"+contentOffsetX); 
             // contentOffset={{x:this.state.contentOffsetX,y:0}} 



            }} 
            > 
            {rows} 

           </ScrollView> 

Answer 1

कई विकल्प हैं। यहां दो हैं जो मैंने कोशिश की है और ठीक काम करते हैं। मैं दूसरा विकल्प पसंद करता हूं क्योंकि इसके डॉक्टर कहते हैं "जैसे सूची दृश्य, यह प्रदर्शन के बिना सैकड़ों पृष्ठों को प्रस्तुत कर सकता है"।

1. react-native-page-swiper
2. react-native-viewpager

Answer 2

आप अन्य पुस्तकालयों आप कर सकते हैं कि scrollview के साथ की जरूरत नहीं है। आपको बस अपने घटक में निम्नलिखित प्रोप जोड़ना है।

horizontal= {true} 
    decelerationRate={0} 
    snapToInterval={200} //your element width 
    snapToAlignment={"center"} 

चेक कैसे लागू करने के लिए के बारे में अधिक जानकारी के लिए इस नाश्ता यह https://snack.expo.io/H1CnjIeDb