Маршрутизация внутри субкомпонентов с помощью react-navigation 5.x - PullRequest
Новая
       4

Маршрутизация внутри субкомпонентов с помощью react-navigation 5.x

0 голосов
/ 19 июня 2020

В моем приложении React Native (0.62) есть несколько экранов. Вот структура экрана: 

--App.js    //NavigationContainer/Stack declared for 2 components : Splashscreen & AppScreen
  --Splashscreen.js
  --AppScreen.js  //AStack declared with 6 components listed below
       --Home.js
         --Upload.js
         --MyFavoritePost.js
             --List.js 
               --Item.js
                 --Itemdetail.js

Все List.js, Item.js и Itemdetail.js находятся под MyFavoritePost.js

Вот Stack, как указано в App.js: 

<NavigationContainer>
  <Stack.Navigator InitialRouteName="Splash">
    <Stack.Screen name="Splash" component={SplashScreen} options={{headerShown:false}}/>
    <Stack.Screen name="App" component={AppScreen} options={{headerShown:false}} />
  </Stack.Navigator>
</NavigationContainer>

Вот AStack как заявлено AppScreen.js: 

          <AStack.Navigator initialRouteName="Home">
            <AStack.Screen name="Home" component={Home} />
            <AStack.Screen name="Upload" component={Upload} />
            <AStack.Screen name="List" component={Artlist} />
            <AStack.Screen name="MyFavoritePost" component={Newpostfollowed} />
            <AStack.Screen name="Item" component={Imageitem} />
            <AStack.Screen name="ItemDetail" component={Itemdetail} />
          </AStack.Navigator>

Объявление AStack кажется слишком чрезмерным, поскольку List.js Item.js и Itemdetail.js действительно для представления MyFavoritePost.js. Имеет ли смысл объявить AStack как 3 компонента, как показано ниже: 

      <AStack.Navigator initialRouteName="Home">
        <AStack.Screen name="Home" component={Home} />
        <AStack.Screen name="Upload" component={Upload} />
        <AStack.Screen name="MyFavoritePost" component={Newpostfollowed} />
      </AStack.Navigator>

Внутри каждого компонента Upload и MyFacoritePost используйте navigation.navigate("component") для обхода. Новая структура маршрутизации выглядит следующим образом: 

--App.js    //NavigationContainer/Stack declared for 2 components : Splashscreen & AppScreen
  --Splashscreen.js
  --AppScreen.js  //AStack declared with 3 components listed below
       --Home.js
         --Upload.js   //routing with navigation.navigate() within Upload
         --MyFavoritePost.js //routing with navigation.navigate() within MyFavoritePost
             {--List.js 
               --Item.js
                 --Itemdetail.js}  //those 3 components are removed and not to be declared in navigation stack & will route with navigation.navigate()

Имеет ли смысл новая структура маршрутизации? Возникли проблемы?

1 Ответ

1 голос
/ 19 июня 2020

нет, вторая структура не будет работать, если вы удалите три экрана, которые находятся в компоненте MyFavoritePost, тогда вы не сможете использовать от navigation.navigate() до go для этого экрана. вы можете сделать одно: создать навигатор стека отдельно для этих трех экранов и использовать его в компоненте MyFavoritePost. иначе первая структура идеальна.

...