GoBack от StackNavigator с вложенным BottomTabNavigator - PullRequest
Новая
       7

GoBack от StackNavigator с вложенным BottomTabNavigator

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

Я использую React Navigation 5.x в React Native 0.61.x. Цель состоит в том, чтобы функциональность goBack навигации велась как кнопка возврата Android по умолчанию. В приведенном ниже примере пользователь попадает на страницу профиля, которая находится внутри StackNavigator.

При нажатии кнопки происходит переход к BottonTabNavigator с двумя вкладками. После переключения между вкладками я ожидал, что goBack будет вести себя как аппаратная кнопка возврата Android, которая перемещает пользователя на последнюю видимую вкладку. Когда стек истории BottomTabNavigator пуст, он переходит на страницу профиля. Однако, нажав на стрелку назад в заголовке StackNavigator, вы снова перейдете на начальную страницу.

Я попытался отправить событие goBack вместо прямого вызова функции. Я передал ему null, попытался использовать значения ключа маршрута среди прочего. Есть ли какое-нибудь элегантное решение, которое не требовало бы от меня написания собственной логики маршрутизации c? Я точно знаю, что навигатор верхнего уровня знает историю нижнего уровня и доступные маршруты.

Вот ссылка на рабочий пример и код:

https://snack.expo.io/rJ64JkgDI

Приложение. js

import { Text, View, Button } from 'react-native';
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { createStackNavigator } from "@react-navigation/stack";
import { NavigationContainer } from '@react-navigation/native';

var Stack = createStackNavigator();
var Tab = createBottomTabNavigator();

function Feed() {
    return <View><Text>Feed</Text></View>;
}

function Profile({navigation}){
  return (
    <View>
      <Text>
        Profile
      </Text>
      <Button title="test" onPress={() => { navigation.navigate("Home")} }></Button>
    </View>);
}

function Home() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Messages" component={Messages} />
    </Tab.Navigator>
  );
}

function Messages() {
  return <View><Text>Messages</Text></View>;
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Profile" component={Profile} />
        <Stack.Screen name="Home" component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

1 Ответ

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

Вы можете попытаться сбросить навигацию по стеку или напрямую вызвать нужную страницу на go с помощью навигации по стеку, например: 

 this.props.navigation.dispatch(
   StackActions.reset({
     index: 0,
     actions: [NavigationActions.navigate({ routeName: "Feed" })]
   })
 );
...