Реагируй Родной. Сокрытие товара от BottomTab.Navigator в реагирующей навигации - PullRequest
Новая
       44

Реагируй Родной. Сокрытие товара от BottomTab.Navigator в реагирующей навигации

0 голосов
/ 03 мая 2020

Допустим, у меня есть 3 страницы. Home, Settings, Page.

У меня есть 

<BottomTab.Navigator>
  <BottomTab.Screen name="Home" component={HomeScreen}/>
  <BottomTab.Screen name="Settings" component={SettingsScreen}/>
  <BottomTab.Screen name="Page" component={PageScreen}/>
</BottomTab.Navigator>

Все 3 из них показаны в нижней навигации.

Я хочу получить доступ к Home и Settings из нижней навигации и Page из ссылки на Home странице.

Мой вопрос, есть ли способ скрыть Page от нижней навигации, но при этом ссылаться на него с других страниц и передавать реквизиты и данные на него?

Я попытался удалить Page из <BottomTab.Screen>, но затем я не могу использовать navigation.navigate("Page") для перехода на страницу, и мне нужно это, чтобы я мог передавать реквизиты и данные на эту страницу

Вот некоторый код из приложения. Этот код генерируется с expo 

// App.js
render (
<NavigationContainer
          ref={containerRef}
          initialState={initialNavigationState}
        >
          <Stack.Navigator>
            <Stack.Screen name="Root" component={BottomTabNavigator} />
          </Stack.Navigator>
        </NavigationContainer>
      </View>
)

//bottomTabNavigator component
<RootStack.Navigator initialRouteName={INITIAL_ROUTE_NAME}>
      <RootStack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          title: "Get Started",
          tabBarIcon: ({ focused }) => (
            <TabBarIcon focused={focused} name="md-code-working" />
          ),
        }}
      />
      <RootStack.Screen
        name="Profile"
        component={ProfileScreen}
        options={{
          tabBarVisible: false,
          title: "Your Profile",
          tabBarIcon: ({ focused }) => (
            <TabBarIcon focused={focused} name="md-book" />
          ),
        }}
      />
    </RootStack.Navigator>

Спасибо

1 Ответ

1 голос
/ 03 мая 2020

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

https://reactnavigation.org/docs/stack-navigator/

После установки всего, вы можете сделать что-то вроде этого 

const RootStackNavigator = () => {
    return(
        <RootStack.Navigator>
            <RootStack.Screen name="main" component = {BottomStackScreen}/>
            <RootStack.Screen name="Page" component={PageScreen} />
        </RootStack.Navigator>
    )
}

Итак, в своем коде вы можете переключить ваше приложение . js до: 

<Stack.Navigator>
   <Stack.Screen name="Root" component={BottomTabNavigator} />
   <Stack.Screen name="Page" component={PageScreen} />
</Stack.Navigator>

Затем вы можете перейти на страницу с помощью this.props.navigation.navigate("Page");

...