Передача параметров на вкладку навигатор React Navigation 5 - PullRequest
Новая
       97

Передача параметров на вкладку навигатор React Navigation 5

1 голос
/ 16 апреля 2020

Я использую materialTopTabs и похоже, что он загружает все экраны в навигаторе после его установки. У меня есть экран Список и внутри него вкладка навигатора с 2 экранами: Сообщения и Пользователи . Эти два экрана зависят от параметров, переданных из Список . Однако я могу передать параметры только на один из экранов, используя этот метод: 

navigation.navigate('PostsTabNav', {
  params: {
    network: item,
  },
  screen: 'NetworkPosts' //or NetworkUsers
});

Я попытался передать параметры своему навигатору напрямую, выполнив следующее: 

navigation.navigate('PostsTabNav', {
  network: item
});

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

const PostsTabNav = createMaterialTopTabNavigator();
const PostsMainNav = (props) => {
    const temp = props.route.params.network; //params here

    return (
        <PostsTabNav.Navigator>
            <PostsTabNav.Screen name="NetworkPosts" component={NetworkPostsScreen} />
            <PostsTabNav.Screen name="NetworkUsers" component={NetworkUsersScreen} />
        </PostsTabNav.Navigator>
    );
};

Есть ли способ передать temp на оба моих экрана? Если нет, то есть ли лучший способ справиться с этой ситуацией?

Вот код для StackNavigator

const NetworkListStackNav = createStackNavigator();
export const NetworksListNavigator = () => {
    return (
        <NetworkListStackNav.Navigator>
            <NetworkListStackNav.Screen name="List" component={ListScreen} />
            <NetworkListStackNav.Screen name="PostsTabNav" component={PostsMainNav} />
        </NetworkListStackNav.Navigator>
    );
};

1 Ответ

3 голосов
/ 17 апреля 2020

Передайте параметры навигатору, а затем откройте его на вкладках с помощью React Context.

Создайте контекст в отдельном файле, который вы можете импортировать как в навигатор, так и на экраны: 

export const NetworkContext = React.createContext();

Затем укажите параметры в контексте: 

const PostsTabNav = createMaterialTopTabNavigator();

const PostsMainNav = ({ route }) => {
  return (
    <NetworkContext.Provider value={route.params.network}>
      <PostsTabNav.Navigator>
        <PostsTabNav.Screen name="NetworkPosts" component={NetworkPostsScreen} />
        <PostsTabNav.Screen name="NetworkUsers" component={NetworkUsersScreen} />
      </PostsTabNav.Navigator>
    </NetworkContext.Provider>
  );
};

В вашем компоненте экрана используйте контекст: 

const network = React.useContext(NetworkContext);

Также см. https://reactnavigation.org/docs/hello-react-navigation#passing -additional-props

...