如何限制（点）指标的数量计为Carousel的3？

Question

 this.state ={
  elements: [{title: 'title1'}, {title: 'title2'}, {title: 'title3'},
   {title: 'title4'}, {title: 'title5'}, {title: 'title6'}, {title: 
   'title7'}, {title: 'title8'}, {title: 'title9'}]
 }

 <Carousel
  ref='carousel'
  hideIndicators={false}
 >
  { this.props.elements.map((element, index) =>
     <View> <Text> {element.title}</Text> </View>
   )}
 </Carousel>

图像中有12个指标，但我想限制轮播指标的数量。 我想在屏幕上只显示3个指示符（点）。

请建议是否有人知道解决方案。

提前致谢

Answer 1

这很容易做到，所以你的元素数组总是会保留2个元素，你可以拥有另一个存储其他指标值的数组。

this.state ={
  allElements: [{title: 'title1'}, {title: 'title2'}, {title: 'title3'},
            {title: 'title4'}, {title: 'title5'}, {title: 'title6'},{title: 
'title7'}, {title: 'title8'}, {title: 'title9'}]
 },
start: 0,
end: 2,
elements: [{title: 'title]}, {title: 'title2}, {title: 'title3'}]

// Here is your update method that increases you start and end value by three and based on that value updates your elements array

update() => {
  start += 3;
  end += 3;
  this.state.elements = null;
  this.state.allElements.map((element, index) => 
     if(index >= start && index <= end) {
      elements.push(allElements[index]);
     }
  )
}

<Carousel
 ref='carousel'
 hideIndicators={false}
>
{ this.props.elements.map((element, index) =>
 <View> <Text> {element.title}</Text> </View>
 )}
</Carousel>

我的语法可能不完全正确，但您可以理解，例如，如果此人点击下一个箭头，那么您increment会以3开头和结尾，如果此人点击了上一个箭头，然后decrement 3开始和结束值。{/ p>

现在要更新您的州，请在此处阅读如何更新您的州 - https://learn.co/lessons/react-updating-state

希望这有帮助！