reset or change bottomTabNavigator text and route dynamically on scroll in react native

问题

I have created react native app with expo cli. I have a screen in which there is 6 section I just wanted to change the bottomTabNavigator for each section when scroll arrives at a particular section.

import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';



const HomeStack = createStackNavigator(
  {
    Home: FlatListComponent,
  },
  config
);

HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-information-circle${focused ? '' : '-outline'}`
          : 'md-information-circle'
      }
    />
  ),
};

HomeStack.path = '';



const menu = {
  HomeStack


}

const tabNavigator = createBottomTabNavigator(menu);

tabNavigator.path = '';

export default tabNavigator;

Example - This is happen when user scroll down or up

来源：https://stackoverflow.com/questions/58947420/reset-or-change-bottomtabnavigator-text-and-route-dynamically-on-scroll-in-react