React Native 神器：打造个性化导航页面，从官方示例开始（下）

2023-12-24 09:10:59

朋友们，我们继续深入了解 React Native 的导航系统！在上篇文章中，我们掌握了官方 Demo 的基本知识。现在，让我们更进一步，探索如何实现自定义页面导航，让你的应用脱颖而出！

定制你的导航方式

默认情况下，React Navigation 要求所有页面遵循统一的进入动画（卡片式或模态式）。但我们可以通过修改 StackNavigator API 和进入页面时的导航配置来打破这个限制。

在 route.js 文件中，让我们修改 StackNavigator 的配置：

const AppStack = createStackNavigator({
  Home: { screen: HomeScreen },
  Details: {
    screen: DetailsScreen,
    navigationOptions: {
      headerShown: false, // 隐藏标题栏
      cardStyle: { opacity: 0.9 }, // 设置卡片透明度
    },
  },
});

通过添加 headerShown 和 cardStyle 选项，我们可以自定义导航栏的可见性，并为特定页面设置特殊的进入动画。

灵活的页面进入方式

现在，让我们为特定页面配置不同的进入方式：

import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';

const AppStack = createStackNavigator({
  Home: { screen: HomeScreen },
  Details: {
    screen: DetailsScreen,
    navigationOptions: ({ navigation }) => ({
      // 根据路由参数配置进入动画
      transitionConfig: () => ({
        transitionSpec: {
          duration: 500,
          timing: Animated.timing,
          easing: Easing.out(Easing.poly(4)),
        },
      }),
    }),
  },
});

const App = createAppContainer(AppStack);

export default App;