React Native 入门（十三） - StackNavigator 快速入门

RN 版本：0.50
针对平台：Android
操作环境：Windows 10
React Navigation 版本：1.0.0-beta.20

文章同步自简书：http://www.jianshu.com/p/dece7a09c6bf

前言

Navigator（导航器）是用来进行场景（页面）切换的组件，但是由于它的各种缺陷，从 0.44 开始，就被 fb 移除了，并且推荐大家使用更方便的 React Navigation 。

React Navigation 改进并取代了多个导航库，目前仍然在继续完善中。它包含 StackNavigator、TabNavigator 和 DrawerNavigator，你还可以自定义导航器。由于我也是跟着官方文档刚刚学，打算边学边总结加深印象，同时给大家一个参考（英文文档我看着实在很累）。不出意外，应该会写上好几篇。

StackNavigator 实现最基本的页面跳转

首先安装 React Navigation：

yarn add react-navigation

然后导入到项目中（这里我们只用到了 StackNavigator）：

import {StackNavigator} from 'react-navigation';

下面的例子来源于 官网，我在其基础上加以说明，直接上代码。

const HomeScreen = () => ( <View style={{flex: 1,justifyContent: 'center',alignItems: 'center'}}> <Text>Home Screen</Text> </View> ); const DetailScreen = () => ( <View style={{flex: 1,alignItems: 'center'}}> <Text>Detail Screen</Text> </View> ); const RootNavigator = StackNavigator({ Home: { screen: HomeScreen },Detail: { screen: DetailScreen } }); export default RootNavigator;

两个 View 分别展示了一行文本，这里主要讲一下 RootNavigator 的定义。

其中 Home 和 Detail 是自定义的名称，screen 属性是要显示在页面上的视图组件。StackNavigator 顾名思义，栈导航器，这里写的 Home 页面就是第一个入栈的，也是程序运行时第一个显示的。

我们将其导入并注册，

import RootNavigator from './RootNavigator';
AppRegistry.registerComponent('BlogDemo',() => RootNavigator);

运行。

可以看到第一个页面已经显示出来了，并且自带了一个类似 ToolBar 的东西，这个东西怎么去掉，我还没有研究到。

好了，这并不是我这篇文章打算说的东西。

下面说一说如何跳转到 Detail 页面。我们在 HomeScreen 中稍作修改，

const HomeScreen = ({navigation}) => ( <View style={{flex: 1,alignItems: 'center'}}> <Text>Home Screen</Text> <Button  onPress={() => navigation.navigate('Detail')} title='Go to Detail'/> </View> );

可以看到在方法的参数中添加了一个 {navigation} 的参数，暂时先不需要知道它的具体工作原理，只要知道在某个页面被 StackNavigator 加载的时候，会自动分配一个 navigation 属性就可以了。这个属性就是用来驱动页面之间的跳转的。navigate(routeName,params,action) 这个方法有三个参数，目前只说第一个。routeName 表示已经注册过的目标路由的名称，也就是我们打算跳转到的页面，这里就是 Detail，由于是自定义的名称，书写的时候不要写错了。

为了美观（大概吧），我们再给两个 ‘ToolBar’ 加上标题。

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

然后跑起来：

Detail 页面还自带了一个返回按钮，是不是很神奇？

最后呢，一般来说，每个页面都是单独写在一个 js 文件中的，这样的话，该如何取到 navigation 参数并进行页面跳转呢？

我们之前说过了，在某个页面被 StackNavigator 加载的时候，会自动分配一个 navigation 属性。所以如果我们把 HomeScreen 和 DetailScreen 单独拿出来，可以这么写，以 HomeScreen 为例：

export default class HomeScreen extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <View style={{flex: 1,justifyContent: 'center',alignItems: 'center'}}>
      <Text>Home Screen</Text>
      <Button
          onPress={() => this.props.navigation.navigate('Detail')}
          title='Go to Detail'/>
    </View>;
  }
}

没有错，我们可以直接通过 this.props.navigation 获取到它，然后执行 navigate() 方法。

但是，官网却是这么写的（代码似乎和本节不一致，因为是在另一个地方粘的，请先忽略，这不是重点）：

class HomeScreen extends React.Component {
  render() {
    const {navigate} = this.props.navigation;

    return (
      <View>
        <Text>This is the home screen of the app</Text>
        <Button
          onPress={() => navigate('Profile',{name: 'Brent'})}
          title="Go to Brent's profile"
        />
      </View>
     )
   }
}

第一眼看上去我懵逼了， const {navigate} = this.props.navigation; 是个什么鬼？

仔细想想，其实这就是解构赋值嘛。我在 React Native 入门（五） - Props（属性） 这篇文章中，还专门写过，自己都差点忘记了。

它们不过是不同的写法，效果是完全一致的，图就不贴了。先暂时写这么多，等我继续研究研究再更新吧。