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 (
Home Screen
);
}
}
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
}
}
这里需要注意的是,import命令如果目标js在同级目录,不能省略"./",否则会提示找不到模块。
按这样写完,运行后就看到了一个包含导航栏的空页面。
但是只有一个页面好像没什么用,起码得能完成跳转啊,于是我又写了一个页面:
class MyScreen extends React.Component{
render(){
return(
My Screen
)
}
}
这个页面的注册还是放在createStackNavigator里:
const AppNavigator = createStackNavigator({
Home: {
screen: HomeScreen
},
My: {
screen: MyScreen
}
});
然后,在HomeScreen里加入一个按钮让他的点击事件触发跳转:
运行后发现点击按钮可以完成页面的跳转,新页面带有一个返回按钮,这就实现了跟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和模式对话框部分另起一篇文章写。