More than code
Welcome to the website

React Navigation 指南 2:屏幕切换

在上一节“Hello React Navigation”中,我们定义了一个带有两个路由(Home和Details),下面来看如何从Home调到Details
在浏览器中我们这样实现跳转:

<a href="details.html">Go to Details</a>

或者用另一种方法

<a onClick={() => { document.location.href = "details.html"; }}>Go to Details</a>

下面看在React Navigation中的实现。

1. 跳转到新的屏幕

import React from 'react';
import { Button, 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>
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

// ... other code from the previous section

说明:

  • this.props.navigation:传递给StackNavigator中每个屏幕组件的navigation属性。
  • navigate('Details'):调用属性navigation上的函数navigate,参数是路由名称。实现屏幕组件跳转。

    调用方法this.props.navigation.navigate时提供的路由名称如果不是我们在StackNavigator中定义的,那什么都不会发生。换句话讲,我们只能跳到我们自己的StackNavigator上定义的路由。

现在有两个路由,HomeDetails。如果从Details跳转到Details,会发生什么?代码如下:

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Button
          title="Go to Details... again"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

当点击button按钮时,它什么也不会做(注意:这是和1.x版本中不同的地方,在1.x版本中,会向导航栈中压入一个新的屏幕)。
如果想向导航栈中添加一个屏幕,则需要用到push

<Button
  title="Go to Details... again"
  onPress={() => this.props.navigation.push('Details')}
/>

2. 返回

当有可能从当前活跃屏幕返回时,StackNavigator会在当前活跃屏幕的头部自动包含一个返回按钮(如果导航栈中只有一屏,没有什么能返回的,所以也不存在返回按钮)。如果有特殊需求,可自定义headerLeft组件实现。

如果在程序中触发该行为,可以调用this.props.navigation.goBack()

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Button
          title="Go to Details... again"
          onPress={() => this.props.navigation.push('Details')}
        />
        <Button
          title="Go to Home"
          onPress={() => this.props.navigation.navigate('Home')}
        />
        <Button
          title="Go back"
          onPress={() => this.props.navigation.goBack()}
        />
      </View>
    );
  }
}

在Android平台上,React Navigation会把goBack()函数关联到硬件返回按键,所以点击物理回退按键能达到同样的效果。

3. 返回多个屏幕

另一个常见的要求是能够返回多个屏幕
例如,如果您在堆栈中有几个屏幕深度,并且想要将它们全部撤回到第一个屏幕。在这种情况下,我们知道我们想要回去Home我们可以使用navigate('Home')另一种选择navigation.popToTop(),可以回到堆栈中的第一个屏幕。
如果现在的导航栈是这样:A -> B -> C,从页面C返回到A在1.x中处理这个事情很麻烦,在2.x中使用navigate('A')就可以达到回退多个页面的目的。

4. 总结

  • this.props.navigation.navigate('RouteName'):如果堆栈导航器尚未位于堆栈中,则将新路线推送到堆栈导航器中,否则会跳转到该屏幕。
  • 我们可以用this.props.navigation.push('RouteName')继续在栈中压入路由。
  • 标题栏将自动显示后退按钮,但也可以通过调用以编程方式返回this.props.navigation.goBack()。在Android上,硬件后退按钮按同样会达到返回效果。
  • 可以通过this.props.navigation.navigate('RouteName')返回到栈中已有的屏幕。所以,navigate()既有压入新栈的作用,又有回退的作用
  • navigation属性可用于所有屏幕组件(在路由配置中定义为屏幕的组件以及输出为React Navigation的组件)。
赞(1) 打赏
未经允许不得转载:李帅帅空间 » React Navigation 指南 2:屏幕切换

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏