Делить состояние параметров между стековыми навигаторами в реагирующей навигации

Question

Как передать параметры из стекового навигатора нескольким стековым навигаторам, вложенным в навигатор по вкладкам?

const UsersStack = createStackNavigator(...)
const PostsStack = createStackNavigator(...)
const AlbumsStack = createStackNavigator(...)
const ToDosStack = createStackNavigator(...)

const MainTabNavigator = createBottomTabNavigator({
  PostsStack,
  AlbumsStack,
  ToDosStack
});

const AppNavigator = createAppContainer(
  createSwitchNavigator({
    User: UsersStack,
    Main: MainTabNavigator
  })
);

Из UsersScreen в UsersStack, который я использую ..

navigation.navigate("Main", { userId: "1" })

Прибытие на PostsScreen в PostsStack без параметров

navigation.navigate("Posts", { userId: "1" })

Прибытие на PostsScreen в PostsStack с доступными параметрами, но только на PostsStack.Переключение вкладок на AlbumsStack или ToDosStack показывает, что параметры не доступны.

Ожидаемый вывод должен иметь параметры userId, доступные во всех стеках.

Answer 1

Лучше всего использовать Context API .Создайте контекст и удерживайте свой идентификатор пользователя, затем оберните компонент Stack Navigation внутри Context.Provider

import NavigationContext from './components/MyContext'

export default class App extends React.Component {
  render() {
    return (
      <NavigationContext.Provider value={{
        "userId": "1"
      }}>
        <AppNavigator />
      </NavigationContext.Provider>
    );
  }
}

Теперь для использования userId используйте Context.Consumer, который получит текущее значение контекста и вернет его на все экраны stacknavigator

import React from 'react'
import { View, Text, Button, StyleSheet } from 'react-native';
import NavigationContext from './MyContext'
export default class UserScreen extends React.Component {
  constructor(props) {
    super(props)
  }
  _navigate = () => {
    this.props.navigation.navigate('Page2')
  }
  render() {
    return (
      <NavigationContext.Consumer>
        {
          ({ userId }) => {
            return (
              <View style={styles.container}>
                <Text>Page  1</Text>
                <Text>{`UserId ${userId}`}</Text>
                <Button onPress={this._navigate} title="Navigate to page 2" />
              </View>)
          }
        }
      </NavigationContext.Consumer>
    )
  }
}

См. Пример здесь https://snack.expo.io/@selvaganesh93/navigationglobalcontextdemo