Реагируйте с навигацией - не работает экран Stack.Navigator.

Question

У меня есть следующий код, который создает простой навигатор стека для 2 компонентов Login и List. У меня есть файл useState в файле с навигатором (App.js), и я хочу передать сеттер и геттер на каждый из экранов. Я попытался использовать screenProps в стековом навигаторе, но после регистрации реквизитов, передаваемых каждому из компонентов, переменные не отображаются.

TL; DR Мне нужно передать реквизиты из Stack.Navigator вниз на каждый экран

<NavigationContainer>
  <Stack.Navigator screenProps={{setVariable, variable}}>
    <Stack.Screen
      name="Login"
      component={Login}
      options={navOptions}
    />
    <Stack.Screen
      name="List"
      component={List}
      options={navOptions}
    />
  </Stack.Navigator>
</NavigationContainer>

Answer 1

Вам необходимо использовать контекстный API React

// MyContext.js
export const MyContext = React.createContext();

// App.js
const context = React.useMemo(() => ({
  setVariable,
  variable
}), [variable]);

return (
  <MyContext.Provider value={context}>
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Login"
          component={Login}
          options={navOptions}
        />
        <Stack.Screen
          name="List"
          component={List}
          options={navOptions}
        />
      </Stack.Navigator>
    </NavigationContainer>
  </MyContext.Provider>
);

// Home.js
const variable = React.useContext(MyContext);

https://reactnavigation.org/docs/en/upgrading-from-4.x.html#global -props-with-screenprops