React Native Tab View如何实时获取当前页面索引？

使用react-native-tab-view切换页面时，想要获取当前页面的索引。目前通过将index作为props传递的方案响应缓慢，控制台日志延迟1秒才输出，体验很差，求更优解决方案。

原代码如下：

const SearchMain = ({}: ISearchMain) => {
  const { t } = useTranslation();
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'products', title: 'Produkte'},
    { key: 'users', title: 'Personen' },
  ]);

  const renderScene = ({ route }: { route: { key: string; title: string; } }) => {
    switch (route.key) {
      case 'products':
        return <Products index={index} />;
      case 'users':
        return <Users index={index} />;
        return null;
    }
  }
  return (
    <TabView
      lazy
      navigationState={{ index, routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      keyboardDismissMode='auto'
      initialLayout={initialLayout}
      renderTabBar={renderTabBar}
    />
  );
}

更优解决方案 #

1. 直接通过路由获取当前索引 #

renderScene的回调参数包含当前route，可以直接通过routes数组查找对应索引，不需要依赖父组件的index状态，彻底避免状态传递的延迟问题：

const renderScene = ({ route }: { route: { key: string; title: string; } }) => {
  const currentIndex = routes.findIndex(item => item.key === route.key);
  switch (route.key) {
    case 'products':
      return <Products index={currentIndex} />;
    case 'users':
      return <Users index={currentIndex} />;
    default:
      return null;
  }
}

2. 子组件直接读取导航状态（react-navigation集成场景） #

如果项目搭配react-navigation使用，子组件可以直接用useNavigationState钩子获取当前索引，无需父组件传递：

// Products组件内部
import { useNavigationState } from '@react-navigation/native';

const Products = () => {
  const currentIndex = useNavigationState(state => state.index);
  console.log('当前页面索引：', currentIndex);
  return <View>{/* 组件内容 */}</View>;
};

3. 优化状态传递的响应速度 #

如果坚持使用父组件传递index的方式，可通过以下方式减少不必要的重渲染，提升响应速度：

• 用useCallback包裹renderScene，避免每次父组件渲染都重新创建函数：

const renderScene = React.useCallback(({ route }: { route: { key: string; title: string; } }) => {
  switch (route.key) {
    case 'products':
      return <Products index={index} />;
    case 'users':
      return <Users index={index} />;
    default:
      return null;
  }
}, [index]);

• 给子组件添加React.memo，仅在index变化时才重渲染：

const Products = React.memo(({ index }: { index: number }) => {
  console.log('Products当前索引：', index);
  return <View>{/* 组件内容 */}</View>;
});

const Users = React.memo(({ index }: { index: number }) => {
  console.log('Users当前索引：', index);
  return <View>{/* 组件内容 */}</View>;
});

内容的提问来源于stack exchange，提问作者universe11