反应本机:水平滚动廊

Question

我想做一个水平滚动画廊的反应-本地人：

像这样，其中分离的屏幕有点单击。我还想让这些小圆圈向您展示有多少页，以及您在哪个屏幕上。就像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>