如何使用 createBottomTabNavigator 为 React Navigation 过渡设置动画？

Posted 2023-02-19

【中文标题】如何使用 createBottomTabNavigator 为 React Navigation 过渡设置动画？

【英文标题】：How do I animate React Navigation transitions using createBottomTabNavigator?

【发布时间】：2021-11-12 13:26:47

【问题描述】：

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

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

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

【问题讨论】：

如果我的回答有帮助，请分享您的反馈。

原来如此，谢谢。我只是还没有足够的声望来投票。

【参考方案1】：

只需创建一个Animated.View 并将其附加到您的屏幕上。

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

然后将其用于Tab.Screen

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

只需在screenOptions 中添加unmountOnBlur: true

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

<Tab.Navigator ... screenOptions >

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

您也可以使用react-native-reanimated 创建<FadeInView /> 组件

【讨论】：

非常感谢。但是，有没有办法在褪色页面上保持状态？启用 unmountOnBlur 会导致用户丢失所有导航历史记录。有没有一种方法可以实现相同的行为但保留所有状态逻辑？

是的，有一种方法可以做到这一点，但您必须使用focus 事件监听器。 Triggering an action with a 'focus' event listener 并致电FadeAnimation。

使用 useFocusEffect hook snack.expo.dev/@pedrosousa/fade-animation-between-bottom-tabs 使其工作。现在下一步实际上是实现一个淡入淡出动画，它在屏幕内容之间而不是在 rootviewbackground（在本例中为空白屏幕）之间转换

添加这个属性<Tab.Navigator ... screenOptions,sceneContainerStyle >和const sceneContainerStyle= backgroundColor:'#95a5a6' 你不会看到白屏。