推荐使用：React Native 动画导航库

React Native 中一个流行的动画导航库是 react-navigation 配合 react-native-reanimated 和 react-native-gesture-handler。以下是一个使用 react-navigation 和 react-navigation-stack 创建带有动画的堆栈导航器的示例代码：

import React from 'react';
import { Animated, Easing } from 'react-native';
import { createStackNavigator } from 'react-navigation-stack';
import { Transition } from 'react-navigation-transitions';
 
// 定义过渡动画配置
const slideFromRight = (props) => {
  const { layout, scene } = props;
  const { index } = scene;
 
  const width = layout.initWidth;
  const translateX = width * index;
 
  return {
    transform: [{
      translateX: translateX
    }]
  };
};
 
// 定义动画持续时间和动画类型
const duration = 500;
 
const slideFromRightTransitionConfig = () => ({
  duration: duration,
  // 自定义动画的 easing 函数
  easing: Easing.inOut(Easing.ease),
  // 自定义动画的样式
  screenInterpolator: slideFromRight
});
 
// 创建一个自定义TransitionComponent使用上面定义的动画
const CustomTransition = ({ route, navigation }) => (
  <Transition
    configureTransition={slideFromRightTransitionConfig}
    navigation={navigation}
    route={route}
  />
);
 
// 定义你的屏幕
const HomeScreen = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>Home Screen</Text>
  </View>
);
 
const ProfileScreen = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>Profile Screen</Text>
  </View>
);
 
// 创建导航器
const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen,
    // 使用自定义的TransitionComponent
    transitionConfig: CustomTransition
  },
  Profile: {
    screen: ProfileScreen,
    // 使用自定义的TransitionComponent
    transitionConfig: CustomTransition
  }
});
 
export default AppNavigator;

这个示例展示了如何创建一个带有自定义滑入动画的堆栈导航器。Transition 组件允许你定义屏幕之间切换的动画，而 slideFromRight 函数则定义了具体的动画样式。你可以通过调整 duration 和 slideFromRight 中的 translateX 值来改变动画的持续时间和屏幕滑动的路径。