В моем BottomTabNavigator есть вкладка обзора. Когда я нажимаю на нее, открывается начальный маршрут вкладки "Обзор". Отсюда я могу щелкнуть, чтобы увидеть более подробную информацию. Это приведет к другому экрану. Назовем его (B)

.

Моя проблема заключается в том, что если я нахожусь на этом маршруте/странице (B) внутри вкладки "Обзор", затем перехожу на другую вкладку и возвращаюсь в "Обзор", то он показывает мне маршрут/страницу (B), однако я хочу, чтобы он отображал маршрут/страницу (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",
      },
    },

GHOST

Ответов: 2

Ответы (2)

просто добавьте resetOnBlur в createBottomTabNavigator Options, как это DOCS

import { createBottomTabNavigator, BottomTabBar } from 'react-navigation-tabs';

const TabBarComponent = (props) => ;

const TabScreens = createBottomTabNavigator(
  {
    // другие экраны
  },
  {
    tabBarComponent: (props) => (
      
    ),
    resetOnBlur:true //добавить здесь
  }
);

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 (
    
      
      
    
  );
}

function HomeScreen() {
  return (
    
      Home!
    
  );
}

function OverviewScreen() {
  return (
    
      Обзор!
      Go to Detail
    
  );
}

function DetailScreen() {
  return (
    
      Detail!
    
  );
}

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    
      
      
    
  );
}

export default function App() {
  return (
    
      
    
  );
}

Если вы заметили, я устанавливаю параметры для экрана (экранов), которые мы хотим размонтировать при размытии, с помощью unmountOnBlur: true.

Одним из возможных нежелательных побочных эффектов этого является то, что если вы находитесь на экране DetailScreen под вкладкой Overview, и вы случайно коснетесь вкладки Overview снова, это вернет вас обратно на OverviewScreen (потому что DetailScreen был выведен наружу). Это может быть или не быть ожидаемым пользовательским опытом. Но есть и другой способ настроить поведение, прослушивая различные события на Tab.Screen, как описано ниже.

Если вы хотите пофантазировать, вы можете добавить слушателя на Tab.Screen и сделать более сложные вещи, см. здесь: https://reactnavigation.org/docs/navigation-events/#listeners-prop-on-screen

 ({
    tabPress: e => {
      // Предотвращение действия по умолчанию
      e.preventDefault();

      // Делаем что-нибудь с объектом `навигация`
      navigation.navigate('AnotherPlace');
    },
    blur: () => {
      // Делайте что-нибудь здесь
    },
  })}
/>

2022 WebDevInsider