反应原生：水平滚动图库

Question

我想在react-native中创建一个水平滚动图库：

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

您可以使用具有圆形指示符的视图寻呼机组件。请参阅ReactNativeViewPager

代码如下所示

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