在浏览器中,链接到其他页面你可以使用HTML锚点标签(anchor tag)。当用户点击一个链接时,当前页面的URL被压到浏览器历史记录栈中。当用户点击了回退按钮,浏览器会从浏览历史记录栈的栈顶弹出一项,然后当前活跃页面现在又变成了之前刚刚访问过的那个页面。React Native没有像浏览器这样一个全局的访问历史记录栈机制,正因此,React Navigation走进了我们的故事。
React Navigation的 StackNavigator
提供给你的应用在不同屏幕之间切换和管理浏览历史记录的方法。如果你的应用只使用了StackNavigator
,概念上讲,这跟浏览器对导航状态的处理就很类似了 – 应用在和用户交互的过程中向浏览历史栈压入路由项或者从中弹出路由项,从而让你的用户看到不同的屏幕。跟浏览器的情况相比,这里一个关键的不同是React Navigation的StackNavigator
提供了屏幕切换时你想在安卓或者iOS平台上会有的手势和动画效果。
开始使用 React Navigation我们需要做的是从一个 StackNavigator
开始。
StackNavigator
是一个函数,返回一个 React 组件。它接受一个路由配置对象(route configuration object),和一个可选对象(option object,现在我们在本文下面的部分会暂时忽略这个对象)。因为StackNavigator
函数返回的是一个React 组件,我们可以从 App.js
中直接把它导出用作我们应用的根组件。
// In App.js in a new project
import React from 'react';
import { View, Text } from 'react-native';
import { StackNavigator } 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 StackNavigator({
Home: { // 这里 Home 是路由名称 route name
screen: HomeScreen, // screen 项是一个路由配置中唯一必要的项
},
});
→ 执行这段代码
如果你执行了这段代码,你会看到这样一个屏幕 :
- 一个空白导航(头部白色区域)
- 一个灰色内容区域,包裹着组件HomeScreen
你看到的这个导航条和内容样式是StackNavigator
的缺省配置,稍后我们会学习如何配置它们。
路由名称(route name)的大小写没有关系 – 你可以使用小写的
home
,或者首字母大写的Home
,随便你。我们建议路由名称首字母大写。
路由配置中唯一必要的部分是
screen
。更多其他可用的选项你可以阅读StackNavigator参考手册。
在 React Native中,App.js
中导出的组件是应用程序的入口点(或者叫做根组件) – 是所有其他组件派生出来的地方。通常在根组件上有更多的控制会有更多用途,而仅仅导出一个StackNavigator
做不到这一点,所以我们在下面导出一个仅仅渲染了一个我们的StackNavigator
组件的其他组件作为应用的根组件 :
const RootStack = StackNavigator({
Home: {
screen: HomeScreen,
},
});
// 这样你可以在继承自 Component 的 App 上有更多的控制
export default class App extends React.Component {
render() {
return <RootStack />;
}
}
RootStack
组件没有任何属性设置 – 所有的配置都通过StackNavigator
函数的options
选项参数指定。而我们这里的options
选项参数是空的,所以它就使用了缺省配置。要看一个使用了options
选项参数的例子,我们向StackNavigator
中增加第二个屏幕 。
// Other code for HomeScreen here...
class DetailsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
</View>
);
}
}
const RootStack = StackNavigator(
{// 参数 1 : 路由配置对象
Home: { // 上面例子已经提到的第一个屏幕
screen: HomeScreen,
},
Details: { // 该例子新加的第二个屏幕
screen: DetailsScreen,
},
},
{// 参数 2 : 选项对象
initialRouteName: 'Home',
}
);
// Other code for App component here...
现在我们的栈中有两个路由了,Home
和Details
。Home
路由对应屏幕HomeScreen
组件,Details
组件对应屏幕DetailsScreen
组件。导航栈的初始路由是Home
。到这里,很自然地就冒出了另外一个问题 : “我怎样从Home
路由切换到Details
路由呢?”。这就是下一章节所要覆盖的内容。
StackNavigator
是一个函数,接收一个路由配置对象参数和一个选项参数,返回一个React组件。screen
项(指出该路由对应哪个组件)。StackNavigator
的选项参数中使用 initialRouteName
可以指定一个导航栈的初始路由。React Navigation 基础 8 : 术语词汇表
React Navigation 基础 7 : 全屏模态
React Navigation 基础 6 : 头部按钮
React Navigation 基础 5 : 配置导航头部
React Navigation 基础 4 : 屏幕间切换参数传递
React Navigation 基础 3 : 屏幕间切换
React Navigation 基础 2 : Hello React Navigation
React Navigation 基础 1: 开始使用