React Native Snap Carousel - 第一项答案

【问题标题】：React Native Snap Carousel - First ItemReact Native Snap Carousel - 第一项
【发布时间】：2020-03-18 02:14:24
【问题描述】：

我正在尝试让我的 React Snap Carousel 加载到所需的索引上。目前，当轮播加载时，它会加载第一个索引，而不是我用 FirstItem 告诉它的索引。当我刷新屏幕或保存在我的代码编辑器中时，轮播会捕捉到我所指的 firstItem(index)。下面是我的代码。我也看到了很多卡片，它们指向https://github.com/archriss/react-native-snap-carousel/blob/master/doc/KNOWN_ISSUES.md#unreliable-first-item。尽管我无法弄清楚如何让它正常工作，但对于我的一生来说。我很感激任何帮助。谢谢你。

  <Carousel
    layout={'default'}
    ref={c => {
    this._carousel = c;
    }}
    useScrollView={true}
    data={this.getDaysArray() ? this.getDaysArray() : []}
    renderItem={this.renderItem.bind(this)}
    sliderWidth={Platform.OS === 'ios' ? 375 : 392}
    itemWidth={Platform.OS === 'ios' ? 310 : 332}
    firstItem={22}
    initialScrollIndex={23}
    onLayout={() => {
      this._carousel.snapToItem(22);
      }}
  />

【问题讨论】：

运气好吗？

标签： react-native react-native-snap-carousel

【解决方案1】：

我遇到了同样的问题，由于某种原因，当我从未在其中放置一个空列表时，它起作用了。当您始终将带有N 元素的数据放在firstItem < N 的位置时，它就起作用了。所以这样的事情对我有用。

if (this.getDaysArray().length===0){
    return (<View> 
              <Text>Loading screen or what ever</Text>
            <View/>)
}

return  (
<Carousel
    layout={'default'}
    ref={c => {
    this._carousel = c;
    }}
    useScrollView={true}
    data={this.getDaysArray() ? this.getDaysArray() : []}
    renderItem={this.renderItem.bind(this)}
    sliderWidth={Platform.OS === 'ios' ? 375 : 392}
    itemWidth={Platform.OS === 'ios' ? 310 : 332}
    firstItem={22}
    initialScrollIndex={23}
    onLayout={() => {
      this._carousel.snapToItem(22);
      }}
  />

)

【讨论】：