React Navigation 的使用基础部分（二）Hello React Navigation

原文链接

       在web浏览器中，你能使用<a>标签链接到不同的网页。当用户点击一个链接，URL被push到浏览器历史栈中。当用户点击返回按钮时，浏览器将其从栈顶弹出，因此当前页就是之前访问过的网页。React Navive并不想网页浏览器一样内嵌全局的历史栈，因此React Navigation闪亮登场了。

       React Navigation的栈导航器可以实现app页面间的跳转，也可以管理导航历史。如果你的app只有一个栈导航器，那么在概念上就与网络浏览器导航状态相似，用户与app交互时，页面入栈出栈，用户就能看到不同的界面。不同点是React Navigation提供了跳转的手势和动画。

       我们只需要一个createStackNavigator的函数就可以开始了。

创建一个栈导航器

createStackNavigator函数返回了React组件。需要路由配置对象和可选的设置对象。因为其返回了组件，我们可以直接从App.js中导出，在根组件中使用。

// 新项目的 App.js 

import React from 'react';
import { View, Text } from 'react-native';
import { createStackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

export default createStackNavigator({
  Home: {
    screen: HomeScreen
  },
});

如果运行这段代码，会看到一个带有空导航栏和包含Home Screen组件的灰色的内容区域的页面。界面风格是栈导航器的默认配置，我们稍后会学习如何设置。

路由名称的大小写并不重要，又能使用小写home或者大写Home，取决于你。我们更喜欢用大写。

唯一必需的路由配置是screen组件。

在React Native中，从App.js中导出的组件是入口点，或者根组件--其他组件都是从这里延申出去的。相对于导出createStackNavigator来说，更好的控制app的根组件通常更有用，所以我们可以导出一个渲染了栈导航器的组件：

const RootStack = createStackNavigator({
  Home: {
    screen: HomeScreen
  },
});

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

（一个是直接导出栈导航器，另一个是先render再导出）

Route configuration

考虑到screen是Home页的唯一路由配置，我们不需要使用{screen:HomeScreen}格式的配置，可以直接使用组件：

const RootStack = createStackNavigator({
  Home: HomeScreen
});

添加第二个路由

<RootStack/>组件不接收任何属性--所有配置在options参数中指定。options属性是空的，所以使用默认配置。为了使用options属性，我们添加第二个screen。

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
      </View>
    );
  }
}

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  }
);

现在我们的栈里有两个路由，主页路由和详情页路由。主页路由相应HomeScreen组件，详情页路由相应Details Screen路由。初始路由是主页路由Home。下一章会讲怎样从Home跳转到Details。

总结

React Native不像网页浏览器一样有内置导航器。React Navigation提供了这样的功能。

createStackNavigator函数需要路由配置对象和options对象，返回React组件。

路由配置对象的key是路由名称，value是路由的配置。唯一必需的属性是screen（路由要使用的组件）。

Options对象中指定的initialRouteName是栈中的初始路由。