Глубокая связь с вложенной реакцией и навигацией - PullRequest
Новая
       27

Глубокая связь с вложенной реакцией и навигацией

1 голос
/ 18 апреля 2019

Мы пытаемся добавить глубокие ссылки в наше собственное приложение Expo реагировать, используя Expo Linking , который открывает определенный путь в приложении, используя что-то вроде этого: 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>
        )
    }

Это наш маршрутизатор.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'
    },
});

1 Ответ

1 голос
/ 24 апреля 2019

Поскольку навигаторы так вложены, вместо добавления 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'
    }
});
...