reagieren nativer: Horizontales Scrollen Galerie

Question

I wan eine horizontale Scrollen Galerie machen in reagieren-native:

Like this wo die separaten Bildschirm Art von Klick. Ich möchte auch diese little circle things, um Ihnen zu zeigen, wie viele Seiten es gibt, und auf welchem ​​Bildschirm Sie sind. Wie die über das Dock auf dem Startbildschirm von ios

---

Ab jetzt habe ich nur eine horizontale Scrollview mit einigen ‚Karten‘ drin:

<ScrollView horizontal={true}> 

        <View style={{ 
         height: 9, 
        }}> 
         {/*buffer between items*/} 
        </View> 

        <View 
         style={{flexDirection: 'row', 
         width: width-9, 
         height: 50, 
         top: 163, 
         alignContent: 'center', 
         alignItems: 'center', 
         //justifyContent: 'flex-wrap', 
         flexWrap: 'wrap' 
         }} 
        > 

         {/*card 1*/} 
         <Card 
          onPress={() => navigate('General')} 
          source={require('../resources/icons/information.png')} 
          text={'General Info'} 
         > 
         </Card> 

         {/*card 2*/} 
         <Card 
          onPress={() => navigate('Grades')} 
          source={require('../resources/icons/information.png')} 
          text={'Gradebook'} 
         > 
         </Card> 

         {/*card 3*/} 
         <Card 
          onPress={() => navigate('Grades')} 
          source={require('../resources/icons/information.png')} 
          text={'Lunch Menu'} 
         > 
         </Card> 

         {/*card 4*/} 
         <Card 
          onPress={() => navigate('BellSchedule')} 
          source={require('../resources/icons/information.png')} 
          text={'Bell Schedules'} 
         > 
         </Card> 

         {/*card 5*/} 
         <Card 
          onPress={() => navigate('About')} 
          source={require('../resources/icons/information.png')} 
          text={'About'} 
         > 
         </Card> 

        </View> 

       </ScrollView> 

Was habe ich jetzt nicht hat 'Seiten' und hat Fluid Scrolling. Es wird wahrscheinlich nichts wie die Lösung sein. Auch was ist das von scroll/view/gallery thing genannt?

Answer 1

Sie können stattdessen eine View-Pager-Komponente mit Kreisindikatoren verwenden. Siehe ReactNativeViewPager

-Code wie etwas aussehen wird unter

<IndicatorViewPager 
    style={{height:200}} 
    indicator={this._renderDotIndicator()}> 
     <View style={{backgroundColor:'cadetblue'}}> 
      <Text>page one</Text> 
     </View> 
     <View style={{backgroundColor:'cornflowerblue'}}> 
      <Text>page two</Text> 
     </View> 
     <View style={{backgroundColor:'#1AA094'}}> 
      <Text>page three</Text> 
     </View> 
    </IndicatorViewPager>