如何使用 createBottomTabNavigator 对 React Navigation 过渡进行动画处理？

Question

我花了最后一天的时间试图找出如何使用反应导航实现简单的淡入淡出屏幕转换，但我找不到一种方法让它与底部选项卡导航器一起使用。有人可以帮我吗？我已经广泛阅读了文档，但动画似乎只能通过堆栈导航器使用。

你能在这个小吃演示中进行过渡吗？

https://snack.expo.io/?platform=android&name=Native%20Stack%20Navigator%20%7C%20React%20Navigation&dependencies=%40expo%2Fvector-icons%40*%2C%40react-native-community%2Fmasked -view%40*%2Creact-native-gesture-handler%40*%2Creact-native-pager-view%40*%2Creact-native-paper%40%5E4.7.2%2Creact-native-reanimated%40*%2Creact -native-safe-area-context%40*%2Creact-native-screens%40*%2Creact-native-tab-view%40%5E3.0.0%2C%40react-navigation%2Fbottom-tabs%406.0.4%2C %40react-navigation%2Fdrawer%406.1.3%2C%40react-navigation%2Felements%401.0.4%2C%40react-navigation%2Fmaterial-bottom-tabs%406.0.4%2C%40react-navigation%2Fmaterial-top-tabs %406.0.2%2C%40react-navigation%2Fnative-stack%406.0.5%2C%40react-navigation%2Fnative%406.0.2%2C%40react-navigation%2Fstack%406.0.6&hideQueryParams=true&sourceUrl=https%3A%2F %2Freactnavigation.org%2Fexamples%2F6.x%2Ftab-based-navigation-minimal.js

Answer 1

只需创建一个

Animated.View

并将其附加到您的屏幕上。

const FadeHomeScreen = (props) => (
  <FadeInView>
    <HomeScreen {...props} />
  </FadeInView>
);

然后用它来

Tab.Screen

<Tab.Screen name="Home" component={FadeHomeScreen} />

然后只需在

unmountOnBlur: true

 中添加 

screenOptions

const screenOptions = {
    unmountOnBlur: true,
    headerShown: false,
};

<Tab.Navigator {...{ screenOptions }}>

代码：https://snack.expo.dev/@fanish/native-stack-navigator-%7C-react-navigation

您还可以使用

react-native-reanimated

创建

<FadeInView />

组件

Answer 2

将 Screen 组件包裹到 FadeView 组件中 并且不要忘记在 screenOptions 中添加 unmountOnBlur: true

淡入淡出视图.tsx

import { cn } from "@/lib/utils";
import { View } from "react-native";
import Animated, { FadeIn, FadeOut } from "react-native-reanimated";

type FadeViewProps = {
  children: React.ReactNode;
  className?: string;
};
export default function FadeView({ children, className }: FadeViewProps) {
  return (
    <View className={cn("flex-1 bg-white")}>
      <Animated.View
        className={cn("flex-1", className)}
        entering={FadeIn}
        exiting={FadeOut}
      >
        {children}
      </Animated.View>
    </View>
  );
}

index.tsx

...
import FadeView from "@/components/animation/fade-view";

export default function Index() {
  return (
    <FadeView>
     ...
    </FadeView>
  );
}

我只是将除_layout（选项卡）内的所有组件包装到

中