React Native自定义路由管理

Posted 2021-08-31 xiangzhihong8

1，自定义路由

众所周知，不管是在原生android还是ios，它们都有一个默认的路由路由栈管理类。由于React Native官方没有提供路由管理的组件，所以我们需要使用react-navigation插件提供的Stack.Navigator组件来管理路由。

Stack.Navigator使用的命名路由，所谓命名路由，指的是路由需要先声明然后才能使用。为了方便管理路由页面，我们会将路由放到一个统一的位置，比如screens包下，如下所示。

然后，我们在项目的screens/index.js文件中新建一个常量，主要用来管理声明的路由，如下所示。

export const stacks = [
  {
    name: \'AllMovieScreen\',
    component: AllMovieScreen,
    options: {headerShown: false},
  },
  {
    name: \'CitySelectScreen\',
    component: CitySelectScreen,
    options: {title: \'选择城市\'},
  },
  …. //省略其他路由页面
];

然后，我们再新建一个MainStackScreen.js文件，用来实现路由的跳转、返回等操作。同时，MainStackScreen类的另一个作用是统一导航栏的样式，代码如下所示。

onst MainStack = createStackNavigator();

func