使用 React Stack Navigation v4 在 Android 上缓慢过渡动画

Question

我们的应用具有在主屏幕中显示底部 tabBar 并在用户导航到另一个（更改堆栈）时隐藏它的功能，但是从 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，则不会发生此问题

Answer 1

不建议动态更改tabBarVisible，因为您现在遇到的原因：

文档说：

一些选项卡导航器（例如底部选项卡导航器）也有一个 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 仅包含在堆栈导航器中，当您在此屏幕上时，它不会显示选项卡，只会显示标题。

这种方法的另一个好处是您也不必传递参数即可使其工作。