React Native 平面列表initialScrollIndex未按预期工作

62lalag4  于 2023-02-09  发布在  React
关注(0)|答案(1)|浏览(155)

我正在使用一个水平的平面列表作为我的应用程序的菜单栏。平面列表必须滚动到被单击的项目,我正在使用initialScrollIndex。
但问题是,它滚动但内容多次不可见。
我的代码

<FlatList
      ref={listRef}
      data={headerMenuChannels}
      style={{
        backgroundColor: applicationTopBar.buttonBarColor,
        width: Dimensions.get('window').width,
      }}
      showsHorizontalScrollIndicator={false}
      horizontal={true}
      onScrollToIndexFailed={error => console.log('scroll failed', error)}
      initialScrollIndex={screenNumber}
      renderItem={v => (
        <View
          key={v.index}
          onLayout={ref => onMenuLayout(ref, v.index)}>
          <Text
            onPress={() => {
              setScreenNumber(v.index);
            }}>
            {v.item}
          </Text>
        </View>
      )}
    />

问题视频
here

ttcibm8c

ttcibm8c1#

对于initialScrollIndex,您应该使用getItemLayout属性。

getItemLayout={(data, index) => ({
            length: width,
            offset: width * index,
            index,
          })}

相关问题