は、ネイティブの反応：水平スクロールギャラリー

Question

は、私は、水平スクロールギャラリーを作るためにワン反応し、ネイティブ：クリックの

Like thisどこ別々の画面のソート。どれくらいのページが表示されているのか、どの画面が表示されているのかを表示するには、little circle thingsが好きです。 IOSのホーム画面上のドック以上のもののよう

---

は、今のところ私はそれでいくつかの「カード」で水平scrollViewを持っている：

<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> 

私が今持っていることはありません。 'ページ'と流体スクロールしています。 それはまるで解決策のようにはなりません。 スクロール/ビュー/ギャラリーのものは何ですか？

Answer 1

サークルインジケータを持つ代わりにビューページャコンポーネントを使用できます。 コード

<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>