More than code
Welcome to the website

React Navigation 指南 1:Hello React Navigation

1. 简介

React Navigation源于React Native社区需要的一个可扩展且易于使用的导航解决方案,该解决方案完全使用JavaScript编写(因此开发者可以阅读并理解所有源代码)。

后续文档基于React Navigation (v2.0.1)
官方文档

2. 安装

在React Native项目中安装react-navigation

yarn add react-navigation
# or with npm
# npm install --save react-navigation

3. Hello React navigation

在Web浏览器中,可以使用HTML锚点标签(anchor tag)<a>。当用户点击一个链接时,当前页面的URL被压到浏览器历史记录栈中。当用户点击了回退按钮,浏览器会从浏览历史记录栈的栈顶弹出一项,然后当前活跃页面现在又变成了之前刚刚访问过的那个页面。React Native没有像浏览器这样一个全局的访问历史记录栈机制,正因此,React Navigation走进了我们的故事。

React Navigation的堆栈导航器提供给你的应用在不同屏幕之间切换和管理浏览历史记录的方法。如果你的应用只使用了堆栈导航器 ,概念上讲,这跟浏览器对导航状态的处理就很类似了 – 应用在和用户交互的过程中向浏览历史栈压入路由项或者从中弹出路由项,从而让你的用户看到不同的屏幕。跟浏览器的情况相比,这里一个关键的不同是React Navigation的堆栈导航器提供了屏幕切换时你想在安卓或者iOS平台上会有的手势和动画效果。

该库包含三类组件:

(1)StackNavigator:用来跳转页面和传递参数
(2)TabNavigator:类似底部导航栏,用来在同一屏幕下切换不同界面
(3)DrawerNavigator:侧滑菜单导航栏,用于轻松设置带抽屉导航的屏幕

4. 创建一个 StackNavigator

createStackNavigator是一个函数,返回一个React组件。它接受一个路由配置对象,和一个可选对象。因为createStackNavigator返回的是一个React组件,我们可以直接把它导出用作应用的跟组件。

// In App.js in a new project

import React from 'react';
import { 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>
      </View>
    );
  }
}

export default createStackNavigator({
  Home: {
    screen: HomeScreen
  },
});

运行这段代码,会看到一个空白的导航和灰色内容区域的HomeScreen组件现在的样子为缺省配置,后面会有详细配置。
如图:

路由名称(route name)的大小写没有关系 – 你可以使用小写的 home,或者首字母大写的 Home,官方推荐使用首字母大写。

5. 路由配置简写

const RootStack = createStackNavigator({
  Home: HomeScreen
});

6. 添加第二个路由

RootStack组件没有任何属性设置 – 所有的配置都通过createStackNavigator函数的options选项参数指定。首先添加第二个屏幕。

// Other code for HomeScreen here...

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
      </View>
    );
  }
}

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  }
);

// Other code for App component here...

现在我们的栈中有两个路由了,Home和Details。Home路由对应屏幕HomeScreen组件,Details组件对应屏幕DetailsScreen组件。导航栈的初始路由是Home。

7. RouteConfigs

路由配置对象

createStackNavigator({
  // For each screen that you can navigate to, create a new entry like this:
  Profile: {
    // `ProfileScreen` is a React component that will be the main content of the screen.
    screen: ProfileScreen,
    // When `ProfileScreen` is loaded by the StackNavigator, it will be given a `navigation` prop.

    // Optional: When deep linking or using react-navigation in a web app, this path is used:
    path: 'people/:name',
    // The action and route params are extracted from the path.

    // Optional: Override the `navigationOptions` for the screen
    navigationOptions: ({ navigation }) => ({
      title: `${navigation.state.params.name}'s Profile'`,
    }),
  },

  ...MyOtherRoutes,
});

8. StackNavigatorConfig

createStackNavigator第二个配置参数列表:
initialRouteName:设置默认的页面组件,必须是上面已注册的页面组件。
initialRouteParams:初始路由的参数。
navigationOptions:配置StackNavigator的一些属性。
paths:path属性适用于其他app或浏览器使用url打开本app并进入指定页面。path属性用于声明一个界面路径,例如:【/pages/Home】。此时我们可以在手机浏览器中输入:app名称://pages/Home来启动该App,并进入Home界面。(待验证)
mode:定义跳转风格
card:使用ios和安卓默认风格
modal:使屏幕从底部滑入,这是一种常见的iOS模式。只适用于iOS,对Android没有影响。

headerMode:边缘滑动返回上级页面时的动画效果。
float:iOS默认的效果,可以看到一个明显的过渡动画。
screen:滑动过程中,整个页面都会返回。
none:没有动画。

headerTransitionPreset:指定导航在headerMode: float启用时应该如何从一个屏幕切换到另一个屏幕。
fade-in-place:导航组件在不移动的情况下淡入淡出。
uikit:类似ios的默认行为。

cardStyle:各个页面设置统一的样式,比如背景色,字体大小等。
transitionConfig:配置页面跳转的动画,覆盖默认的动画效果。
onTransitionStart:当转换动画即将开始时被调用的功能。
onTransitionEnd:当转换动画完成,将被调用的功能。

9. 总结

  • React Native没有像浏览器一样的内置导航API。React Navigation提供了此功能,以及iOS和Android手势和动画以在屏幕之间切换。
  • createStackNavigator 是一个接收路由配置对象和选项对象并返回React组件的函数。
  • 路由配置对象中的键是路由名称,值是该路由的配置。配置中唯一需要的属性是screen(用于路由的组件)。
  • StackNavigator的选项参数中使用 initialRouteName可以指定一个导航栈的初始路由。
赞(0) 打赏
未经允许不得转载:李帅帅空间 » React Navigation 指南 1:Hello React Navigation

评论 抢沙发

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

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

支付宝扫一扫打赏

微信扫一扫打赏