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

• 更多分享：www.catbro.cn

一、前言：

• 开发一个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>
    	);
  

• 其会去寻找对应的页面压出栈顶然后渲染