Open felix-cao opened 5 years ago
React Navigation 是一个为 React Native App 提供路由(Routing)和导航(Navigation)功能。通过本文的学习,需要理解下面两个概念
React Navigation
React Native App
Routing
Screen Component
Stack Navigator
浏览器中有内置的 window.history 以栈的形式管理着历史记录。入栈即进入一个新的页面,出栈即后退至上一页面。
window.history
ps: 要理解上面的一句话请阅读下面两篇文章:
可惜的是React Native 没有这种内置的全局的历史记录管理方式,React Navigation 的诞生就是为了解决这个问题。
React Native
React Navigation 是一个为 React Native App 提供路由和导航功能, 与浏览器中 window.history 如出一辙,以栈的形式保存着历史记录吗。
React Navigation 源于 React Native 社区对一个可扩展且易于使用的导航解决方案的需求,它完全使用 JavaScript 编写(因此你可以阅读并理解所有源码)。
JavaScript
React Navigation 主要有以下三种导航:
StackNavigator
TabNavigator
DrawerNavigator
此外, React Navigation 还提供酷炫的切换动画。
假设你的 React Native App 项目目录为 weat-client
weat-client
cd ./weat-client yarn add react-navigation # or with npm # npm install --save react-navigation
OK, 现在就可以在你的项目中使用 React Navigation 了。
下面结合 React Navigation 写一个 Hello Navigation,在用 expo init just-eat 初始化一个名为 just-eat 项目中,根目录下有个 App.js.
Hello Navigation
expo init just-eat
just-eat
App.js
// In 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 Navigation</Text> </View> ); } } const AppNavigator = createStackNavigator({ Home: { screen: HomeScreen } }); const AppContainer = createAppContainer(AppNavigator); export default AppContainer;
上面的代码我们我们来解读一下:
HomeScreen
Screen
AppNavigator
createStackNavigator
AppContainer
最后把 Hello Navigation 放到 snacks 中跑一吧.
React Navigation
是一个为React Native App
提供路由(Routing
)和导航(Navigation)功能。通过本文的学习,需要理解下面两个概念Screen Component
Stack Navigator
组件一、简介
浏览器中有内置的
window.history
以栈的形式管理着历史记录。入栈即进入一个新的页面,出栈即后退至上一页面。ps: 要理解上面的一句话请阅读下面两篇文章:
可惜的是
React Native
没有这种内置的全局的历史记录管理方式,React Navigation
的诞生就是为了解决这个问题。React Navigation
是一个为React Native App
提供路由和导航功能, 与浏览器中window.history
如出一辙,以栈的形式保存着历史记录吗。React Navigation
源于React Native
社区对一个可扩展且易于使用的导航解决方案的需求,它完全使用JavaScript
编写(因此你可以阅读并理解所有源码)。React Navigation
主要有以下三种导航:StackNavigator
, 一次只渲染一个页面,并提供页面之间跳转的方法。 当打开一个新的页面时,它被放置在堆栈的顶部TabNavigator
, 渲染一个选项卡,让用户可以在几个页面之间切换DrawerNavigator
提供一个从屏幕左侧滑入的抽屉此外,
React Navigation
还提供酷炫的切换动画。二、安装
假设你的 React Native App 项目目录为
weat-client
OK, 现在就可以在你的项目中使用
React Navigation
了。三、Hello Navigation
下面结合
React Navigation
写一个Hello Navigation
,在用expo init just-eat
初始化一个名为just-eat
项目中,根目录下有个App.js
.上面的代码我们我们来解读一下:
HomeScreen
的Screen Component
(即Screen
组件),HomeScreen
交给AppNavigator
这个导航栈组件(Stack Navigator
)去管理AppNavigator
这个导航栈组件是通过createStackNavigator
函数创建的。createStackNavigator
函数接收一个路由配置对象,后面会详细讲这个路由配置对象。AppNavigator
这个导航栈组件放到AppContainer
容器组件中,最后导出。snacks 跑一把
最后把
Hello Navigation
放到 snacks 中跑一吧.Reference