React Navigation v.5 настраивает правильный объект состояния для глубоких ссылок - PullRequest
Новая
       100

React Navigation v.5 настраивает правильный объект состояния для глубоких ссылок

0 голосов
/ 27 апреля 2020

У меня проблема с обработкой глубоких ссылок в моем приложении. Я считаю, что моя переменная конфигурации, которую я передаю useLinking , неверна. Моя навигационная структура выглядит следующим образом:

Приложение. js (упрощенно) 

const App = () => {

    const {state} = useContext(UserContext);
    const [isReady, setIsReady] = React.useState(false);
    const [initialState, setInitialState] = React.useState();
    const ref = React.useRef();

    const config = {
        Home: {
          path: 'home',
          screens:{
            HomeDetails: {
              path: 'details/:id',
              parse: {
                id: Number
              }
            },
            ContentPlay: {
              path: 'content/:cid',
              parse: {
                cid: Number
              }
            }
          }
        }
    };


    const { getInitialState } = useLinking(ref, {
        prefixes: ['http://example.com', 'https://example.com'],
        config
    });



    useEffect(() => {
        getInitialState()
        .catch(() => {})
        .then(state => {
            if (state !== undefined) {
                setInitialState(state);
            }
            setIsReady(true);
        });
    }, [getInitialState]);


    if (!isReady){
        return <LoadingScreen />;
    }
    return (
       <NavigationContainer ref={ref} initialState={initialState} >
           {state.user.token === '' ? <LoginStack/> : <MainStack/>}
       </NavigationContainer>
   );
};

MainStack. js (упрощенно) 

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

function DrawerNav() {

    return (
        <Drawer.Navigator 
          initialRouteName='Home'
          drawerContent={props => CustomDrawerContent()}>
        <Drawer.Screen 
          name="Home" 
          component={HomeScreen}/>
        <Drawer.Screen 
          name="Content" 
          component={ContentScreen}/>
        </Drawer.Navigator>
    );
}

const MainStack = () => {
    return (
        <Stack.Navigator
          initialRouteName="DrawerNav">
        <Stack.Screen
          name="DrawerNav"
          component={DrawerNav}/>
        <Stack.Screen
          name="HomeDetails"
          component={HomeDetailsScreen}/>
        <Stack.Screen
          name="ContentPlay"
          component={ContentPlayScreen}/>
        </Stack.Navigator>
    );
}


export default MainStack;

Способ мой Навигация настроена, пользователь может переключаться между экранами «Домой» и «Содержимое» с помощью навигации в ящике Из дома пользователь может положить sh экран HomeDetails в стек. Из HomeDetails они могут только go вернуться (поп) в Home. Они не могут перейти на экраны Content или ContentPlay. Точно так же из Content пользователь может положить sh экран ContentPlay в стек. Из ContentPlay они могут только go вернуться к Контенту.

Моя проблема в том, что я не могу получить какую-либо глубокую ссылку для перехода к HomeDetails или ContentPlay, с Home или Content на root навигации стек. Я думаю, что мой конфиг неверен. В реагирующей навигационной документации по глубоким ссылкам говорится, что «важно отметить, что объект состояния должен соответствовать иерархии вложенных навигаторов. В противном случае состояние будет отброшено».

У меня также есть попробовал другое значение конфигурации, которое содержит глубокую ссылку на HomeDetails или ContentPlay, но когда приложение открыто (закрыто), оно помещает эти экраны в root стека навигации, поэтому нажатие кнопки «Назад» дает мне навигацию ошибка. Значение конфигурации, которое делает это: 

const config = {
  HomeDetails: {
    path: "details/:id",
    parse: {
      id: Number
    }
  },
  ContentPlay: {
    path: 'content/:cid',
    parse: {
      cid: Number
    }
  }
};
...