react-native - createBottomTabNavigator 中的初始路线有问题

Question

在我的 BottomTabNavigator 中，我有一个概述选项卡。当我单击它时，它会显示概述选项卡的初始路线。从这里，我可以点击查看更多详细信息。这将路由到不同的屏幕。我们称之为 (B)

我的问题是，如果我位于“概述”选项卡内的此路线/页面 (B)，然后我单击另一个选项卡，然后返回“概述”，它会显示路线/页面 (B)，但我希望它显示路线/page (A) 如果我更改选项卡并返回到它。

我怎样才能做到这一点？

这是我的 OverviewStack.js

import OverviewStack from "./overviewStack";
import { createStackNavigator } from "react-navigation";
.
.
.
const OverviewStack = createStackNavigator(
  {
    ...OverviewRoutes,
  },
  {
    initialRouteName: "Overview",
    resetOnBlur: true,
    navigationOptions: ({ navigation }) => ({
      ...SharedHeader(navigation),
    }),
  }
);

tabNavigator.js

import { createBottomTabNavigator } from "react-navigation";
.
.
.

export default createBottomTabNavigator(
  {
    Overview: {
      resetOnBlur: true,
      screen: OverviewStack,
      navigationOptions: {
        title: "Home",
      },
    },
    Averages: {
      resetOnBlur: true,
      screen: TrackStack,
      navigationOptions: {
        title: "Track",
      },
    },

Answer 1

resetOnBlur 在最新(版本 5.x)React Navigation 中不可用。它已被弃用，并引入了一个新的类似功能选项 unmountOnBlur。

在这里，我为您制作了一份世博小吃:https://snack.expo.io/@nishantatthatmate/vigorous-peanut

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator, StackActions } from '@react-navigation/stack';
import { Link } from '@react-navigation/native';

const Stack = createStackNavigator();

function OverviewStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="OverviewScreen" component={OverviewScreen} />
      <Stack.Screen name="DetailScreen" component={DetailScreen} />
    </Stack.Navigator>
  );
}

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function OverviewScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Overview!</Text>
      <Link to="/DetailScreen" style={{color:'blue'}}>Go to Detail</Link>
    </View>
  );
}

function DetailScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Detail!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Overview" component={OverviewStack} options={{unmountOnBlur: true}} />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

如果您注意到的话，我正在使用 unmountOnBlur: true 设置我们想要在模糊时卸载的屏幕选项。

这样做的一个可能不受欢迎的副作用是，如果您位于“概述”选项卡下的“详细信息屏幕”上，并且您碰巧再次点击“概述”选项卡，它会将您带回到“概述屏幕”(因为弹出了“详细信息屏幕”)。这可能是也可能不是您预期的用户体验。但是，还有另一种方法可以通过监听 Tab.Screen 上的各种事件来自定义行为，如下所述。

如果你想变得更奇特，你可以在 Tab.Screen 上添加一个监听器并做更多复杂的事情，请参见这里:https://reactnavigation.org/docs/navigation-events/#listeners-prop-on-screen

<Tab.Screen
  name="Chat"
  component={Chat}
  listeners={({ navigation, route }) => ({
    tabPress: e => {
      // Prevent default action
      e.preventDefault();

      // Do something with the `navigation` object
      navigation.navigate('AnotherPlace');
    },
    blur: () => {
      // Do things here
    },
  })}
/>