Как передать параметры в глубокую реагирующую навигацию Stack Navigator - PullRequest
Новая
       20

Как передать параметры в глубокую реагирующую навигацию Stack Navigator

0 голосов
/ 21 января 2019

У меня есть приложение-родное приложение, использующее реагирующую навигацию. Я хочу передать некоторые реквизиты по стековому навигатору, но не уверен, что делать правильно.

Чтобы дать более подробную информацию, мои экраны:

  • ListThingsScreen: список всех вещей.
  • ShowThingScreen: показать детали вещи.
  • EditThingScreen: редактировать вещь.

Они организованы таким образом: 

const HomeStack = createStackNavigator(
  {
    ListThings: ListThingsScreen,
    ShowThing: ShowThingScreen,
    EditThing: EditThingScreen,
  },
  {
    initialRouteName: "ListThings"
  }
);

export default createBottomTabNavigator({
  HomeStack
});

Пользователь приложения:

  1. Войти.
  2. Просмотреть все (в ListThingsScreen).
  3. Нажмите на один из них, перейдите к ShowThingScreen, чтобы увидеть его детали.
  4. Нажмите кнопку на экране сведений, перейдите к EditThingScreen, чтобы отредактировать объект.
  5. После завершения редактирования вернитесь к ShowThingScreen.

В ListThingsScreen componentDidMount() я сделаю асинхронный вызов для извлечения зарегистрированных пользовательских данных, таких как userId, username и т. Д. Я хочу, чтобы все экраны в стеке знали о них, чтобы они работали корректно при показе и при редактировании. .

Решения, которые я могу придумать:

  1. Передать параметры в маршруты, как это указано в response-navigation docs . Это работает, но поскольку у меня в стеке больше экранов, я пишу слишком много кода, например navigation.push("RouteName", {user}) и navigation.getParam("user", "No user").

Это практически единственное решение, которое я нашел. Альтернативой является использование контекста React. Мне больше нравится этот подход, однако я хочу использовать реагирующую навигацию, и концепция Router и Route не существует в библиотеке. 

// ListItemsScreen.js
import { BrowserRouter as Router, Route } from "react-router-dom";

const UserContext = React.createContext();

<UserContext.Provider value={{ user }}>
  <Router>
    <div className="app-container">
      <Route path="/show/:thingId" component={ShowThing} />
      <Route path="/edit/:thingId" component={EditThing} />
    </div>
  </Router>
</UserContext.Provider>

// ShowItemScreen.js
<UserContext.Consumer>
  {({user}) => (...)}
</UserContext.Consumer>

Какой подход более «правильный»? Если это второй подход, как я могу сделать это с реагированием-навигацией?

...