在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再导出)
考虑到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是栈中的初始路由。