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

时间:2020-10-19 19:39:11

标签: reactjs react-native

每次我按下一个按钮,该按钮都会更改存储在与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的结构。

0 个答案:

没有答案