react-navigation 简介

Posted 2020-10-28 codeab

StackNavigator:

原理和浏览器相似但又有局限，浏览器的方式是开放性的，通过点击一个链接可以跳转到任何页面（push），
点击浏览器后退按钮，返回到前一个页面（pop）。
StackNavigator也就是一个路由栈， 这个路由栈的原理和浏览器一样，跳转到一个新页面 push,返回就是pop,
有一个明显的区别是，浏览器中的链接有无数个，点击就可以跳转，不需要实现声明有哪些链接。
在StackNavigator中，必须事先声明这个app中有哪些页面（对应浏览器中的链接），你不能跳转到一个没有事先声明的
页面（即便这个页面在app中存在）。声明的第一个页面默认进入路由栈。
简单用法：

import { StackNavigator } from ‘react-navigation‘;
import Page1 from ‘./page1‘
import Page2 from ‘./page2‘
import Page3 from ‘./page3‘

export default StackNavigator({
    //声明列表:
    //路由名：{页面：页面组件}
    Page1: { screen: Page1},
    Page2: { screen: Page2},
    Page3: { screen: Page3}
},{/*其他的配置*/});

所有在 StackNavigator 中声明的页面，都自动绑定了一个 navigation 属性，
navigation是一个对象，包含很多方法和属性，常用的 就是跳转到新页面和返回：

class Page1 extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: ‘center‘, justifyContent: ‘center‘ }}>
        <Text>Page2 Screen</Text>
        <Button
          title="Go to Page2... again"
          //跳转到Page2页面
          onPress={() => this.props.navigation.navigate(‘Page2‘)}
        />
        <Button
          title="Go back"
          //返回上一个页面
          onPress={() => this.props.navigation.goBack()}
        />
      </View>
    );
  }
}

跳转页面是可以附带参数的，比如：
this.props.navigation.navigate(‘Page2‘,{name:‘lisa‘,age:28})
在Page2页面可以通过 this.props.navigation.state.params.name获取对应的值

有些没有在 StackNavigator 中声明的组件页面，无法获取到 navigation 属性，想要
使用 navigation 有两个办法，通过父组件传递 navigation 属性，还可以通过下面这种方式：

import { withNavigation } from ‘react-navigation‘;

class MyBackButton extends React.Component {
  render() {
    return <Button title="Back" onPress={() => { this.props.navigation.goBack() }} />;
  }
}

export default withNavigation(MyBackButton);

StackNavigator 深度连接 （在浏览器或者其他app中通过url链接唤醒 app到指定页面）
文档介绍：https://reactnavigation.org/docs/deep-linking.html