Блог

В нашем приложении была функция отображения нижней панели вкладок на главных экранах и скрытия ее, когда пользователь переходит к другому (изменяя стек), но после перехода с версии v3 на версию v4 приложение Android работает медленнее при открытии экрана, а переход к закрытию экрана также происходит медленнее, и, по-видимому, каждый раз, когда я перехожу к стеку, он отображает всю навигацию по стеку, которая существует внутри навигации по нижней вкладке, даже если к ней не переходят. В производственном приложении, имеющем 5 вкладок и некоторую анимацию при открытии, ситуация ухудшается.

Как я могу решить эту проблему скачкообразной анимации?

Протестировано на Galaxy Nexus API 29 — Android 10. Те же проблемы возникают на Moto G7 Play, Android 10

Вот код навигации:

 import React from 'react';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import {
  createAppContainer,
  createSwitchNavigator
} from "react-navigation";
import { SafeAreaProvider } from 'react-native-safe-area-context';
import Example, { EmptyScreen } from "./screens/Example";
import { StatusBar } from 'react-native';

const SlowStack = createStackNavigator({
  SlowExample: { screen: Example, params: { tabBarVisible: true } },
  Details: {
    screen: EmptyScreen,
    navigationOptions: {
      headerTitle: "Slow on Close"
    },
    params: { tabBarVisible: false }
  }
});

SlowStack.navigationOptions = ({ navigation }: any) => {
  // console.warn('SlowStack')
  const { params = { tabBarVisible: true } } = navigation.state.routes[navigation.state.index];
  return {
    tabBarLabel: 'SlowStack',
    tabBarVisible: params.tabBarVisible // The change on the visibility of tabBar generates the laggy transition
  };
};

const MainTabs = createBottomTabNavigator({
  SlowStack: {
    screen: SlowStack,
    navigationOptions: {
      tabBarLabel: "SlowStack"
    }
  },
});

const AppSwitchNavigator = createSwitchNavigator({
  Auth: {
    screen: MainTabs
  },
});

const AppNavigator = createAppContainer(AppSwitchNavigator);

export const App = () => (
  <SafeAreaProvider>
    <StatusBar barStyle="dark-content" />
    <AppNavigator />
  </SafeAreaProvider>
)

export default App;
  

Вот полный код:
https://snack.expo.io/@ronicesarrc/slow-react-navigation-example

PS: Эта проблема не возникает, если я не скрываю / не показываю нижнюю панель вкладок динамически или не использую Android 5.1

Динамическое изменение tabBarVisible не рекомендуется по причинам, с которыми вы сталкиваетесь прямо сейчас:

В документации говорится:

Некоторые навигаторы вкладок, такие как bottom tab navigator, также имеют опцию tabBarVisible, которую можно использовать для скрытия панели вкладок на основе инструкций в руководстве по разрешению параметров экрана. Однако мы не рекомендуем использовать ее, поскольку отображение / скрытие панели вкладок в середине навигации может повлиять на анимацию стекового навигатора, вызывая сбои в работе.

Источник:https://reactnavigation.org/docs/hiding-tabbar-in-screens /

Вместо того, чтобы динамически скрывать панель вкладок, я бы изменил структуру ваших навигаторов, вместо этого где ваш основной навигатор — это ваш навигатор стека, а где ваш навигатор вкладок — это экран вашего навигатора стека. Итак, вы можете сделать что-то вроде этого:

 const MainTabs = createBottomTabNavigator({
  SlowExample: {
    screen: Example,
    navigationOptions: {
      tabBarLabel: "Example"
    }
  },
});

const SlowStack = createStackNavigator({
  SlowExample: { screen: MainTabs },
  Details: {
    screen: EmptyScreen,
    navigationOptions: {
      headerTitle: "Slow on Close"
    },
  }
});

SlowStack.navigationOptions = ({ navigation }: any) => {
  return {
    tabBarLabel: 'SlowStack',
  };
};

const AppSwitchNavigator = createSwitchNavigator({
  Auth: {
    screen: SlowStack
  },
});

const AppNavigator = createAppContainer(AppSwitchNavigator);

export const App = () => (
  <SafeAreaProvider>
    <StatusBar barStyle="dark-content" />
    <AppNavigator />
  </SafeAreaProvider>
)
  

Поскольку EmptyScreen он содержится только внутри stack navigator, он не будет отображать вкладки, когда вы находитесь на этом экране, только заголовок.

Дополнительным преимуществом этого подхода является то, что вам также не нужно передавать параметры, чтобы заставить его работать.