Реагировать на навигацию внутри Context.Provider при повторной визуализации - PullRequest
Новая
       63

Реагировать на навигацию внутри Context.Provider при повторной визуализации

0 голосов
/ 26 мая 2020

У меня есть компонент, который устанавливает навигатор стека (TabsWithSearch) с 1 навигатором нижней вкладки (MainTabs) (в нем есть экраны в навигаторах стека (FirstTabStack, SecondTabStack) и 1 экран (Search). Я хочу добиться того, чтобы каждый экран в навигаторе вкладок имел доступ к экрану Search. Search имеет «форму», в которой вы можете ввести свой запрос во входные данные, а затем обновить MyContext s search с ним.

Ниже вы можете найти пример кода (не весь компонент), но он представляет мою текущую настройку. 

const DEFAULT_SEARCH = {query: ""};
const [search, setSearch] = React.useState(DEFAULT_SEARCH);

const TabsWithSearch = createStackNavigator();
const MainTabs = createBottomTabNavigator();
const HomeStack = createStackNavigator();
const ExploreStack = createStackNavigator();

<MyContext.Provider value={{search, setSearch}}>
  <TabsWithSearch.Navigator>
  </TabsWithSearch.Navigator>
  <TabsWithSearch.Screen
    name="Main Tabs"
    component={MainTabsNavigator}
    options={{ headerShown: false }}
  />
  <TabsWithSearch.Screen
    name="Search"
    component={...search screen component}
    options={{
      headerShown: false,
      cardStyleInterpolator: CardStyleInterpolators.forModalPresentationIOS,
      mode: 'modal',
      cardStyle: {
        backgroundColor: 'transparent',
      },
    }}
  />
</MyContext.Provider>

Каждый экран вкладок использует контекст выглядит следующим образом: 

const myContext = React.useContext(MyContext);
console.log(myContext.search);

И Search экран обновляет его так: 

const myContext = React.useContext(MyContext);
console.log(myContext.setSearch({query: "Test"});

Проблема в том, что весь экран обновляется каждый раз, когда обновляется MyContext.search. Этого и следовало ожидать, но как этого избежать, сохранив доступ к MyContext на разных экранах.

...