RN 版本：0.50
操作环境：Windows 10
React Navigation 版本：1.0.0-beta.20文章已同步至 CSDN：http://blog.csdn.net/qq_24867873/article/details/78607564
前言
Navigator（导航器）是用来进行场景（页面）切换的组件，但是由于它的各种缺陷，从 0.44 开始，就被 fb 移除了，并且推荐大家使用更方便的 React Navigation 。
React Navigation 改进并取代了多个导航库，目前仍然在继续完善中。它包含 StackNavigator、TabNavigator 和 DrawerNavigator，你还可以自定义导航器。由于我也是跟着官方文档刚刚学，打算边学边总结加深印象，同时给大家一个参考（英文文档我看着实在很累）。不出意外，应该会写上好几篇。
StackNavigator 实现最基本的页面跳转
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, justifyContent: 'center', 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, justifyContent: 'center', 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（属性） 这篇文章中，还专门写过，自己都差点忘记了。
它们不过是不同的写法，效果是完全一致的，图就不贴了。先暂时写这么多，等我继续研究研究再更新吧。
欢迎关注我的微信公众号
网友评论