React Native Flatlist示例

Question

我如何处理反复原始的平板电脑中的大量数据？

是否有人可以使用React Native Flatlist的ScrollToIndex提供示例？

我正在使用ScrollToIndex和getItemLayout，但它无效。

我的平面列表中有185个项目，当我调用ScrollToIndex（150）时，没有结果。

我曾与Google合作获取ScrollToIndex示例，但没有任何内容。

感谢您的帮助。

这是我的代码：

    <FlatList
      ref={ref => setFlatListRef(ref)}
      // getItemLayout={getItemLayout}
      data={markers}
      keyExtractor={(item, index) => index}
      ItemSeparatorComponent={() => <Separator color={colors.separator} />}
      renderItem={renderItem}
      style={{ flex: 1 }}
      getItemLayout={getItemLayout}

/＆gt;

const getItemLayout = (data, index) => {
  return {
    length: 120,
    offset: 120 * index,
    index
  }

}

const renderItem = ({ item }) => <MyListItem {...props} item={item} />

class MyListItem扩展了React.PureComponent {   render（）{     的console.log（ 'purecom'）     let cost = null     if（this.props.item.minCost！= -1＆amp;＆amp; this.props.item.maxCost！= -1）{       const实体=新实体（）

  if (this.props.item.minCost == 0 && this.props.item.maxCost == 0) {
    cost = 'Guide price: Free'
  } else if (
    this.props.item.minCost == this.props.item.maxCost &&
    this.props.countries[this.props.item.countryID] &&
    this.props.countries[this.props.item.countryID].currencySymbol
  ) {
    cost =
      `Guide price: ` +
      entities.decode(
        this.props.countries[this.props.item.countryID].currencySymbol
      ) +
      `${this.props.item.minCost.toFixed(2)}`
  } else {
    if (
      this.props.countries[this.props.item.countryID] &&
      this.props.countries[this.props.item.countryID].currencySymbol
    ) {
      cost =
        `Guide price from` +
        entities.decode(
          this.props.countries[this.props.item.countryID].currencySymbol
        ) +
        `${this.props.item.minCost.toFixed(2)} to` +
        entities.decode(
          this.props.countries[this.props.item.countryID].currencySymbol
        ) +
        `${this.props.item.maxCost.toFixed(2)}`
    }
  }
}
return (
  <TouchableOpacity
    style={{
      padding: 5,
      height: 120,
      backgroundColor:
        this.props.selectedMarkerID !== this.props.item.ID.toString()
          ? '#fff'
          : colors.separator
    }}
    activeOpacity={1}
    onPress={() => this.props.selectItem(this.props.item)}
  >
    <Text style={{ fontWeight: 'bold', fontSize: 13 }}>
      {this.props.item.Name}
    </Text>
    <Text style={{ marginTop: 1, fontSize: 12 }}>
      {this.props.item.desc}
    </Text>
    <Text style={{ marginTop: 1, fontSize: 12 }}>
      {this.props.markerTypes ? (
        this.props.markerTypes[this.props.item.Type].ShortDescription
      ) : (
        ''
      )}
    </Text>

    <View style={{ flexDirection: 'row', marginTop: 5 }}>
      <View style={{ marginRight: 2 }}>
        <MyCustomMarker
          source={{ url: markerTypesImages[this.props.item.Type] }}
          style={{ width: 25, height: 30 }}
          userFavourites={this.props.userFavourites}
          Type={this.props.item.Type}
          markerID={this.props.item.ID}
        />
        <Image
          source={{ url: images.compass }}
          style={{
            marginTop: 2,
            width: 20,
            height: 20,
            marginLeft: 5,
            transform: [
              { rotate: `${this.props.item.rotate.toString()}deg` }
            ]
          }}
        />
        <Text style={{ fontSize: 9 }}>{this.props.item.distance}km</Text>
      </View>
      {this.props.item.thumb === '' ? (
        <Image
          source={{ url: images.noThumb }}
          style={{ flex: 0.2, width: 84, height: 65 }}
        />
      ) : (
        <Image
          source={{
            url: `${this.props.url}${this.props.item.thumb}`
          }}
          style={{ flex: 0.2, width: 80, height: 60 }}
        />
      )}
      <View style={{ flex: 0.5 }}>
        <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
          {Object.keys(facilities).map((key, i) => {
            if (this.props.item[key] === 1) {
              return (
                <View
                  style={{
                    width: 26,
                    height: 26,
                    padding: 2,
                    margin: 2,
                    alignItems: 'center',
                    borderRadius: 3,
                    borderWidth: 1,
                    borderColor: colors.dark,
                    backgroundColor: 'white'
                  }}
                  key={key}
                >
                  <Image
                    source={{ url: facilities[key] }}
                    style={{ width: 20, height: 20 }}
                  />
                </View>
              )
            }
            return null
          })}
        </View>
        <StarRatingBar
          continuous={true}
          score={this.props.item.score / 2}
          allowsHalfStars={true}
          accurateHalfStars={true}
          dontShowScore={true}
        />
        <View>
          {cost ? <Text style={{ fontSize: 12 }}>{cost}</Text> : null}
          {this.props.item.open ? (
            <Text style={{ color: this.props.item.style, fontSize: 12 }}>
              {this.props.item.open}
            </Text>
          ) : null}
        </View>
      </View>
    </View>
  </TouchableOpacity>
)

} }

setFlatListRef（flatListRef）{     this.setState（{flatListRef}）   }

if (index >= 0) {
  this.setState({ selectedIndex: index })
  setTimeout(() => {
    this.state.flatListRef.scrollToIndex({
      index,
      viewPosition: 0.5
    })
  }, 100)
}