ReactNative页面切换react-navigation导航器之StackNavigator的使用

  发布日期:   2018-01-27
  最新修改:   2020-09-23
  阅读次数:   230 次

一、前言:

  • 开发一个app,导航器是必不可少的一个组件,本篇将记录使用RN官方react-navigation的使用步骤及一些处理技巧。

二、组件说明

  • react-navigation是RN官方提供的,目前github上开源的类似组件也很多,不过个人喜好还是决定使用官方的组件进行开发。

  • 官方对于react-navigation的使用单独开了一部分文档来进行说明。

  • 我们开看一下官方文档的说明:

    • React Navigation is born from the React Native community's need for an extensible yet easy-to-use navigation solution based on Javascript.

    • React Navigation is the result of a collaboration between developers from Facebook, Expo and the React community at large: it replaces and improves upon several navigation libraries in the ecosystem, including Ex-Navigation, React Native's Navigator and NavigationExperimental components.

    • React Navigation的诞生来自于React Native 社区对于需要一个基于Javascript的可扩展且易于使用的导航解决方案的需要。

    • React Navigation 的在Facebook、Expo和React社区开发人员之间共同合作的产物。它取代并改善来生态系统中的几个导航库,其中包括Ex-Navigation、 React Native 的 Navigator和NavigationExperimental 组件。

  • 安装教程官方已经给出的非常详细

    • npm install --save react-navigation 或者 yarn add react-navigation

三、开始使用

1、第一步,创建一个导航器

  • react navigation提供来三个默认的导航器

    • StackNavigator - 通过栈来实现app每个页面间的跳转,每个新的页面都是放置在栈顶
    • TabNavigator - 每个页面是平行的,如几个tab页面
    • DrawerNavigator - 实现抽屉导航,如侧边栏
  • 一般我们用的最多的是StackNavigator导航器。

  • 首先创建一个导航器出来:

      import { StackNavigator } from 'react-navigation';
      const RootNavigator = StackNavigator({
          Home: {
              screen: HomeScreen,
          },
          Details: {
              screen: DetailsScreen,
          },
      });
      export default RootNavigator;
  • 如上,创建两个页面,StackNavigator默认首先加载放在最前面的页面,页面间的跳转通过Home、Details这两个标识来定位,screen对应的即为对应页面的组件

  • 如上配置,我们的页面是没有标题的,一般设置标题有两种方式,第一种在当前页面通过静态变量进行配置,第二种在实力化导航器的时候直接配置:

  • 第二种方式:

          const RootNavigator = StackNavigator({
              Home: {
                  screen: HomeScreen,
                  navigationOptions: {
                      headerTitle: 'Home',
                  },
              },
              Details: {
                  screen: DetailsScreen,
                  navigationOptions: {
                      headerTitle: 'Details',
                  },
              },
          });

2、页面的跳转

  • 导航器会通过props参数将导航器实例本身传递给组件。

  • 即我们可以通过如下方式获取navigation

      const { navigate } = this.props.navigation;
  • 通过navigate方法传入页面标识即可。

          import { View, Text, Button } from 'react-native';
          const HomeScreen = ({ navigation }) => (
              < View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                  < Text>Home Screen</Text>
                  < Button
                      onPress={() => navigation.navigate('Details')}
                      title="Go to details"
                  />
              < /View>
          );
  • 其会去寻找对应的页面压出栈顶然后渲染


   转载规则

《ReactNative页面切换react-navigation导航器之StackNavigator的使用字》GajAngels 采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。