使用BottomTabNavigator防止状态更改后重新渲染

Question

每次我按下一个按钮，该按钮都会更改存储在与bottomtabnavigator链接的两个屏幕的上下文中的状态，并且会记录两次。当我使用堆栈导航器时也会发生相同的情况，如果我在导航到的屏幕中按tha按钮，则会记录两次，就像重新渲染两个屏幕一样，即使其中只有一个可见。 如何防止这种情况发生，只允许重新渲染实际可见的屏幕？

App.js：

const navigator = createBottomTabNavigator(
  {
    Index: IndexScreen,
    Test: tester
  },
  {
    initialRouteName: 'Index', 
  }
);

const App = createAppContainer(navigator);

export default () => {
  return (
    <Provider>
      <App />
    </Provider>
  );
};

IndexScreen.js：

const IndexScreen = () => {
  const { state, ..., increment } = useContext(Context); //... represents some other methods here
  console.log("a");
... //a button that just increments a number stored in state
}

tester.js的结构类似于IndexScreen.js的结构。