Вложенная реагирующая навигация, глубокая связь с expo react native

Мы пытаемся добавить глубокую ссылку в наше родное приложение для реагирования на Expo, используя Экспо Связывание, который открывает определенный путь в приложении, используя что-то вроде этого: myapp://home/items/order-details. Однако при попытке использовать этот URL-адрес deeplink мы попадаем только на главный экран.

Но когда мы используем этот URL: myapp://profile, он действительно открывает экран профиля вместо главного экрана. Кажется, он работает для маршрутов верхнего уровня, но не для вложенных. Есть ли способ получить URL-адрес прямой ссылки, чтобы перейти непосредственно к экрану сведений о заказе, используя нашу навигацию?

Наш App.js выглядит так:

import {createRootNavigator} from './router';

const RootNav = createRootNavigator();
const prefix = Expo.Linking.makeUrl('/');

export default class App extends React.Component {
    render() {
        return (
            <Root>
                <RootNav uriPrefix = {prefix}/>
            </Root>
        )
    }

Это наш router.js

export const MenuNav = createStackNavigator ({
    Menu: {screen: Menu, path: 'menu'},
    OrderDetails: {screen: OrderDetails, path: 'order-details'}
    }
);

export const UserCreate = createStackNavigator ({
    Profile: {screen: Profile}
});

export const Tabs = createBottomTabNavigator({
   'Home': {
        screen: Home,
        path: 'home-tab'
    },
    'Items': {
        screen: MenuNav,
        path: 'items'
    }
}, 
    {tabBarComponent: (props) => {
        return (
          <TabBar
            {...props}
          />
        );
      },
        tabBarPosition: 'bottom',
    },
);


export const createRootNavigator = () => {
  return createDrawerNavigator ({
    Home: {
        screen: Tabs,
        path: 'home'
    }, 
    Profiles: {
        screen: UserCreate,
        path: 'profile'
    },
});
const prefix = Expo.Linking.makeUrl('items/order-details', queryParams) можно попробовать?
hong developer 18.04.2019 04:17

@hongdevelop Большое спасибо!! К сожалению, он по-прежнему не переходит к экрану сведений о заказе!

Maria Espinoza 18.04.2019 06:00

Вы добавляете path сзади и повторяете попытку?

hong developer 18.04.2019 06:42

Expo.Linking.makeUrl('path/items/order-details', queryParams)

hong developer 18.04.2019 06:42

@hongdevelop Используя Expo.Linking.makeUrl('path/items/order-details', queryParams), я должен пытаться перемещаться следующим образом: myapp://home/items/order-details или он должен включать такой путь: myapp://path/items/order-details или path означает что-то еще? Когда я пытаюсь перемещаться с помощью любого из них, к сожалению, он остается на главном экране :(

Maria Espinoza 18.04.2019 07:16

Мне жаль. Я ошибался. Expo.Linking.makeUrl('path/home/items/order-details', queryParams)

hong developer 18.04.2019 09:50
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
6
2 820
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Поскольку навигаторы настолько вложены друг в друга, вместо добавления uriPrefix в RootNav в App.js попробуйте добавить его в tabBarComponent. Итак, в файле router.js вы должны добавить uriPrefix = {prefix} в TabBar. Кроме того, поскольку order-details вложен в другой стек, может потребоваться добавить еще один стек только для экрана OrderDetails, поскольку он уже является собственным экраном. router.js должен выглядеть так:

const prefix = Expo.Linking.makeUrl('/');
export const MenuNav = createStackNavigator ({
    Menu: {screen: Menu, path: 'menu'},
    OrderDetails: {screen: OrderDetails, path: 'order-details'}
    }
);

export const UserCreate = createStackNavigator ({
    Profile: {screen: Profile}
});

export const Tabs = createBottomTabNavigator({
   'Home': {
        screen: Home,
        path: 'home-tab'
    },
    'Items': {
        screen: MenuNav,
        path: 'items'
    }
}, 
    {tabBarComponent: (props) => {
        return (
          <TabBar
            {...props}
            uriPrefix = {prefix}
          />
        );
      },
        tabBarPosition: 'bottom',
    },
);


export const createRootNavigator = () => {
  return createDrawerNavigator ({
    Home: {
        screen: Tabs,
        path: 'home'
    }, 
    Profiles: {
        screen: UserCreate,
        path: 'profile'
    },
    OrderDetails: {
        screen: OrderDetails,
        path: 'history/order/:orderId'
    }
});

Другие вопросы по теме