how can i solve this problem？if i scroll the content,and when i change tabIndex,this content show at top...

[Fengweiyuu]

https://github.com/showtime-xyz/showtime-tab-view/assets/11786678/10bd9053-15bc-45d3-bcb4-415d5673646d

[Fengweiyuu]

<TabView
  lazy={true}
  navigationState={{ index: tabIndex, routes }}
  animationHeaderPosition={animationHeaderPosition}
  animationHeaderHeight={animationHeaderHeight}
  overridenShareAnimatedValue={scrollY}
  enableGestureRunOnJS={true}
  renderScrollHeader={() => (
    <TabScrollHeader
      scrollY={scrollY}
      columnCode={columnCode}
      columnIconUrl={columnIconUrl}
    />
  )}
  renderTabBar={options => (
    <PYAnimatedTabBar
      {...options}
      style={styles.tabBarContainer}
      tabs={routes.map(v => {
        const { index, title = '' } = v
        return {
          textStyle: styles.tabBarText,
          text: `${title}${counts[index]}`,
        }
      })}
      bottomLine={true}
      indicatorOffset={0}
      tabWidth={frameWidth / 3}
      onTabChange={toIndex => options.jumpTo(routes[toIndex].key)}
    />
  )}
  renderScene={({ route: sceneRoute }) => {
    switch (sceneRoute.key) {
      case 'all':
        return (
          <ArticleRouteScene tabIndex={tabIndex} type="1" columnCode={columnCode} />
        )
      case 'video':
        return (
          <ArticleRouteScene tabIndex={tabIndex} type="2" columnCode={columnCode} />
        )
      case 'article':
        return (
          <ArticleRouteScene tabIndex={tabIndex} type="3" columnCode={columnCode} />
        )
      default:
        return null
    }
  }}
  initialLayout={{ height: 0, width: dimensions.sw }}
  // onIndexChange={index => {
  //   setTabIndex(index)
  //   logger(TAG, 'childScrollRef ==', childScrollRef)
  //   runOnUI(() => {
  //     'worklet'
  //     Object.values(childScrollRef).forEach(ref => {
  //       _ScrollTo(ref, 0, 0, false)
  //     })
  //   })()
  // }}
  onIndexChange={setTabIndex}
/>

[alantoa]

@Fengweiyuu Hey, can you try the v0.1.7 I just released?

[Fengweiyuu]

@Fengweiyuu Hey, can you try the v0.1.7 I just released?

but the latest version is 0.1.6

[alantoa]

@Fengweiyuu check here https://www.npmjs.com/package/@showtime-xyz/tab-view

[alantoa]

@Fengweiyuu oh i got it, you should correct part of your code to:

 renderScene={({ route: sceneRoute }) => {
    switch (sceneRoute.key) {
      case 'all':
        return (
          <ArticleRouteScene tabIndex={0} type="1" columnCode={columnCode} />
        )
      case 'video':
        return (
          <ArticleRouteScene tabIndex={1} type="2" columnCode={columnCode} />
        )
      case 'article':
        return (
          <ArticleRouteScene tabIndex={2} type="3" columnCode={columnCode} />
        )
      default:
        return null
    }
  }}

[alantoa]

And what is your "ArticleRouteScene" component code?

[Fengweiyuu]

And what is your "ArticleRouteScene" component code?

import React from 'react'
import { StyleSheet, ViewStyle } from 'react-native'
import { useNavigation } from '@react-navigation/native'
import { StackNavigationProp } from '@react-navigation/stack'
import { Divider } from '../../../components'
import { InfiniteQueryListContainer } from '../../../components-planner/query/infinite-query-list-container'
import { useLogin } from '../../../hooks'
import { ColumnArticlesType, SquareArticle, useQuerySquareColumnArticles } from '../../../http'
import { TabScrollView } from '../../../lib/showtime-tab-view'
import { TabFlashList } from '../../../lib/showtime-tab-view/tab-flash-list'
import { colors, dimensions } from '../../../res'
import { useNowTime } from '../../../zustand/stores/now-time-store-helper'
import { useBatchSquareArticlesToStore } from '../../../zustand/stores/square-article-store-helper'
import { handleArticleItemPress } from '../common'
import { ArticleView } from '../components'

type Props = {
  /** tab index */
  tabIndex: number
  /** 1-全部动态 2-音视频 3-文章 */
  type: ColumnArticlesType
  /** 栏目代码 */
  columnCode: string
}

/**
 * route scene
 */
export const ArticleRouteScene = React.memo((props: Props) => {
  const { tabIndex, columnCode, type } = props
  const { userId } = useLogin()
  const nowTime = useNowTime()
  const navigation = useNavigation<StackNavigationProp<any>>()
  // article store
  const batchSquareArticlesToStore = useBatchSquareArticlesToStore()

  const articlesResult = useQuerySquareColumnArticles({
    userId,
    columnCode,
    type,
    onSuccess(data) {
      const allRows: SquareArticle[] = []
      for (const page of data.pages) {
        for (const row of page.rows) {
          allRows.push(row)
        }
      }
      batchSquareArticlesToStore(allRows)
    },
  })

  return (
    <InfiniteQueryListContainer
      style={styles.container}
      result={articlesResult}
      plainContent={true}
      renderLoadingView={child => <TabScrollView index={tabIndex}>{child}</TabScrollView>}
      renderEmptyView={(_, child) => <TabScrollView index={tabIndex}>{child}</TabScrollView>}
      renderErrorView={(_, child) => <TabScrollView index={tabIndex}>{child}</TabScrollView>}
      renderContent={({ items, footerView, onEndReached }) => {
        return (
          <TabFlashList
            index={tabIndex}
            data={items}
            estimatedItemSize={200}
            scrollEventThrottle={16}
            keyExtractor={(item, index) => `${item.articleId}_${index}`}
            renderItem={({ item, index }) => (
              <ArticleView
                key={`${item.articleId}_${index}`}
                style={styles.item}
                nowTime={nowTime}
                article={item}
                hideAvatarRow={true}
                onArticleContentPress={article => handleArticleItemPress({ navigation, article })}
              />
            )}
            ItemSeparatorComponent={() => <Divider size="hair" wingHorizontal={dimensions.h} />}
            ListFooterComponent={footerView}
            onScroll={() => {
              // if (flashListRef.current) {
              //   flashListRef.current.scrollToOffset({ offset: 0, animated: false })
              // }
            }}
            onEndReached={onEndReached}
          />
        )
      }}
    />
  )
})

type Styles = {
  container: ViewStyle
  item: ViewStyle
}

const styles = StyleSheet.create<Styles>({
  container: {
    flex: 1,
  },
  item: {
    marginTop: 0,
    marginBottom: 0,
    paddingVertical: 20,
    backgroundColor: colors.white,
  },
})

[alantoa]

try to update your tabIndex to see https://github.com/showtime-xyz/showtime-tab-view/issues/13#issuecomment-1573217708

[Fengweiyuu]

try to update your tabIndex to see尝试更新您的 tabIndex 以查看 #13 (comment)

thank u,it solved my problem,but there is another problem,the "TabFlashList"become blank.

[Fengweiyuu]

https://github.com/showtime-xyz/showtime-tab-view/assets/11786678/8b3eba05-4c41-4c17-8fa9-e0bfaa330ecd

[Fengweiyuu]

resolved at: https://github.com/showtime-xyz/showtime-tab-view/issues/11#issuecomment-1576395405