ReactNavigation是react社区比较流行的导航库，完全用js编写，github地址：
https://github.com/react-navigation/react-navigation
他还有个官方网站：
https://reactnavigation.org/docs/en/hello-react-navigation.html
像我这种初学者当然要看看官网文档了，按照文档，先下载依赖库：
yarn add react-navigation
yarn add react-native-gesture-handler
react-native link react-native-gesture-handler
当然，如果想用npm也行，命令都差不多：
npm install --save react-navigation
npm install --save react-native-gesture-handler
react-native link react-native-gesture-handler
然后扒下了如下代码，随便命名为navigation.js放到App.js的同级目录下：
import React from "react";
import { View, Text } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Home Screen</Text>
</View>
);
}
}
const AppNavigator = createStackNavigator({
Home: {
screen: HomeScreen
}
});
export default createAppContainer(AppNavigator);
这里让我比较困惑的是最后一句，export类我听过，按他这么写是个什么玩意？查阅了文档发现export不只能导出类，还能导出函数、值、变量等，同时，一个文件可以有若干个export，但是export default只能有一个，后者相当于导出了一个默认变量，没有名字，你import的时候让他叫什么他就叫什么，而这里的写法，其实导出的是一个值，这个值是它以自己定义的对象AppNavigator为入参调用react-navigation的函数createAppContainer后得到的返回值。这个函数返回的就是一个组件，也就是我们的navigator。
所以在App.js里，我们可以这么写：
import React from "react"
import Container from "./navigation.js"
export default class App extends React.Component{
render(){
return <Container/>
}
}
这里需要注意的是，import命令如果目标js在同级目录，不能省略"./"，否则会提示找不到模块。
按这样写完，运行后就看到了一个包含导航栏的空页面。
但是只有一个页面好像没什么用，起码得能完成跳转啊，于是我又写了一个页面：
class MyScreen extends React.Component{
render(){
return(
<View style={{flex: 1, alignItems: "center", justifyContent: "center"}}>
<Text>My Screen</Text>
</View>
)
}
}
这个页面的注册还是放在createStackNavigator里：
const AppNavigator = createStackNavigator({
Home: {
screen: HomeScreen
},
My: {
screen: MyScreen
}
});
然后，在HomeScreen里加入一个按钮让他的点击事件触发跳转：
<Button title="Goto MyScreen" onPress={() => this.props.navigation.navigate("My")}/>
运行后发现点击按钮可以完成页面的跳转，新页面带有一个返回按钮，这就实现了跟web浏览器一样的功能，这种导航内部维护了一个存放页面的栈，后退功能就是通过这个来实现的。
通过遍历navigation对象的属性我们可以看到除了navigation方法之外还有push、pop、goBack等方法以及state等属性，pop方法跟goBack都是用来返回上一个页面的，push和navigate的区别是如果你调用navigate传入的key对应的页面已经在最上层了，他就不会开启新的页面，push则不同。
navigate和push方法都可以接受传参，把参数放入json里作为第二个参数就可以传递给打开的页面，在打开的页面里用navigation.getParam(参数名)就可以获取到参数。除此之外，还可以通过navigation.state.params得到参数，如果没有任何传参，这个属性会是null。
以上是stackNavigator部分的使用，tab和模式对话框部分另起一篇文章写。
网友评论