ऐपस्टोर की तरह स्क्रॉलव्यू को कैसे कार्यान्वित करें? मैं अगली सामग्री पर स्क्रॉल करने जा रहा हूं, जब स्क्रॉल आधा हो जाएगा

enter image description here

0
codex 12 सितंबर 2018, 11:28

4 जवाब

सबसे बढ़िया उत्तर

horizontal और pagingEnabled बूलियन प्रॉप्स और deviceWidth का उपयोग करके आप इसे FlatList के साथ सरलता से लागू कर सकते हैं;

import React from 'react';
import { StyleSheet, Dimensions, ScrollView, View, Text } from 'react-native';

const deviceWidth = Dimensions.get('window').width;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },

  page: {
    width: deviceWidth
  },

});

const Slider = () => (
  <View style={styles.container}>
    <ScrollView
      horizontal
      showsHorizontalScrollIndicator={false}
      pagingEnabled>
      <View style={styles.page}>
        <Text> This is View 1 </Text>
      </View>
      <View style={styles.page}>
        <Text> This is View 2 </Text>
      </View>
    </ScrollView>
  </View>
);
3
gazdagergo 13 सितंबर 2018, 05:51

आप जिस सुविधा या कार्यक्षमता की तलाश कर रहे हैं वह एक साधारण क्षैतिज स्लाइडर है। आप जो खोज रहे हैं उसे पाने के लिए इस npm लाइब्रेरी का उपयोग कर सकते हैं: https:// www.npmjs.com/package/react-native-snap-carousel

0
Nino9612 12 सितंबर 2018, 11:31

मैं Flatlist का उपयोग करने की सलाह देता हूं जो रिएक्ट-नेटिव का अपना घटक है।

यदि आप डेटा को क्षैतिज रूप से स्वाइप करना चाहते हैं तो फ़्लैटलिस्ट में प्रोप horizontal={true} का उपयोग करें।

0
Ron Astle Lobo 12 सितंबर 2018, 15:13

कुछ ऐसा है जो आप चाहते हैं?

enter image description here

स्रोत कोड: https://snack.expo.io/@gusgard /react-native-swiper-flatlist-2

लाइब्रेरी: https://www.npmjs.com/package/react-native- स्वाइपर-फ्लैटलिस्ट

0
gusgard 19 सितंबर 2018, 16:46