目录

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


一、前言:

  • 开发一个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>
      	);
    
  • 其会去寻找对应的页面压出栈顶然后渲染