想要导航到平面列表分页中的特定章节反应自然

问题描述 投票:0回答:1

我有一个启用水平和分页的平面列表。它基本上包含书籍的章节。我可以访问我想要的任何页面存储用户读取的最后一页。分页也发生在字体大小的基础上,这样当字体很大时,一些数据会移动到下一页。但问题是他们还应该有一个选项可以导航到目前不知道该怎么做的特定章节。可以请任何给出解决方案。非常感谢

const handleMomentumScrollEnd = (event) => {
    
    const offsetX = event.nativeEvent.contentOffset.x;
    const offsetY = event.nativeEvent.contentOffset
    console.log("off set y",offsetY);
    const index = Math.round(offsetX / Dimensions.get('window').width);
    console.log("handle momentum",index);
    setSelectedPageIndex(index);
    console.log("handle momment scroll end");
    

    
  };

  const renderContentPages = (item) => {

    const words = item.content.split(' ');
    const totalPages = Math.ceil(words.length / wordsPerPage);

    return Array.from({ length: totalPages }, (_, pageIndex) => {
      const startIdx = pageIndex * wordsPerPage;
      const endIdx = startIdx + wordsPerPage;
      const pageWords = words.slice(startIdx, endIdx).join(' ');

      return (
        <View key={pageIndex} style={{width:contentWidth}}>
          <Text>{item.title}</Text>
          <Text style={ [{padding:30, fontSize:fontSizeOfBookRead,fontWeight:fontWeightOfBookRead }]}>{pageWords}</Text>
          <Text>{pageIndex+1 }</Text>
          <Text>{item.title.split(" ")[1]}</Text>
        </View>
      );
    });
  };

  <FlatList
            style={{width:contentWidth}}
            horizontal
            pagingEnabled
            data={filteredChapters} // 
            keyExtractor={(item, index) => {
              item.chapId.toString()
              console.log("itemindex",index);
            }}
            onMomentumScrollEnd={handleMomentumScrollEnd}
            ref={scrollViewRef}
            renderItem={({ item }) => (
              renderContentPages(item)
              )}
          />
react-native pagination scrollview flatlist ibooks
1个回答
0
投票

我陷入了同样的问题。 Scrollx 正在计算页面位置。

字体大小是可变的,因此页码也会随着字体大小而变化。

考虑到所有这些,如何将章节的精确页面作为一章获得的可能性不会始终保留在同一页面上?

或者有其他方法可以解决这个问题吗?

© www.soinside.com 2019 - 2024. All rights reserved.