This time I will bring you an analysis of react-navigation use cases. What are the precautions when using react-navigation? The following is a practical case, let’s take a look.
1. Main components
It is mainly divided into three parts according to the usage form:
StackNavigator: Similar to an ordinary Navigator, the navigation bar at the top of the screen
TabNavigator: is equivalent to the TabBarController in ios, and the tab bar at the bottom of the screen
DrawerNavigator: Drawer effect, slide out from the side
2. Use
1. Create a new project
react-native init ComponentDemo
2. Install this library in the application
npm install --save react-navigation
After installation, I found that it is a beta version (v1.0.0-beta.7), but there is a pitfall?! We will talk about this pitfall in detail in a moment~
3. Test TabNavigator, StackNavigator and DrawerNavigator
(1) Create a new HomePage.js
import React from 'react'; import { StyleSheet, View, Text, Button, Image } from 'react-native'; import { StackNavigator, TabNavigator } from 'react-navigation'; import ChatScreen from './ChatScreen'; import MinePage from './MinePage'; class HomePage extends React.Component{ static navigationOptions={ title: '首页',//设置标题内容 header:{ backTitle: ' ',//返回按钮标题内容(默认为上一级标题内容) } } constructor(props) { super(props); } render() { const {navigate} = this.props.navigation; return ( <view> <text>Hello, Navigation!</text> <button> navigate('Chat',{user:'Sybil'})} title="点击跳转"/> </button></view> ) } } const MainScreenNavigator = TabNavigator({ Home: { screen: HomePage, navigationOptions: { tabBar: { label: '首页', icon: ({tintColor}) => ( <image></image> ), }, } }, Certificate: { screen: MinePage, navigationOptions: { tabBar: { label: '我的', icon: ({tintColor}) => ( <image></image> ), }, } }, }, { animationEnabled: false, // 切换页面时不显示动画 tabBarPosition: 'bottom', // 显示在底端,android 默认是显示在页面顶端的 swipeEnabled: false, // 禁止左右滑动 backBehavior: 'none', // 按 back 键是否跳转到第一个 Tab, none 为不跳转 tabBarOptions: { activeTintColor: '#008AC9', // 文字和图片选中颜色 inactiveTintColor: '#999', // 文字和图片默认颜色 showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示 indicatorStyle: {height: 0}, // android 中TabBar下面会显示一条线,高度设为 0 后就不显示线了 style: { backgroundColor: '#fff', // TabBar 背景色 }, labelStyle: { fontSize: 12, // 文字大小 }, }, }); const styles = StyleSheet.create({ container:{ flex: 1, backgroundColor:'#fff' }, icon: { height: 22, width: 22, resizeMode: 'contain' } }); const SimpleApp = StackNavigator({ Home: {screen: MainScreenNavigator}, Chat:{screen:ChatScreen}, }); export default SimpleApp;
(2) Create a new ChatScreen.js
import React from 'react'; import { Button, Image, View, Text } from 'react-native'; class ChatScreen extends React.Component { static navigationOptions = { title:'聊天', }; render() { const {params} = this.props.navigation.state; return ( <view> <text>Chat with {params.user}</text> </view> ); } } export default ChatScreen;
(3) Create a new MinePage.js
import React,{Component} from 'react'; import { Button, Image, View, Text, StyleSheet } from 'react-native'; import { DrawerNavigator } from 'react-navigation'; import MyNotificationsScreen from './MyNotificationsScreen'; class MinePage extends Component{ static navigationOptions = { title:'我的', drawerLabel: '我的', // Note: By default the icon is only shown on iOS. Search the showIcon option below. drawerIcon: ({ tintColor }) => ( <image></image> ), }; render(){; return( <view> <text>Sybil</text> <button> this.props.navigation.navigate('DrawerOpen')} title="点击打开侧滑菜单" /> </button></view> ); } } const styles = StyleSheet.create({ icon: { width: 24, height: 24, }, }); const MyChatNavigator = DrawerNavigator({ MyChat: { screen: MinePage, }, Notifications: { screen: MyNotificationsScreen, }, },{ drawerWidth: 220, // 抽屉宽 drawerPosition: 'left', // 抽屉在左边还是右边 // contentComponent: CustomDrawerContentComponent, // 自定义抽屉组件 contentOptions: { initialRouteName: MinePage, // 默认页面组件 activeTintColor: '#008AC9', // 选中文字颜色 activeBackgroundColor: '#f5f5f5', // 选中背景颜色 inactiveTintColor: '#000', // 未选中文字颜色 inactiveBackgroundColor: '#fff', // 未选中背景颜色 style: { // 样式 } } }); export default MyChatNavigator;
(4) Write MyNotificationsScreen.js
import React from 'react'; import { StyleSheet, View, Text, Button, Image } from 'react-native'; class MyNotificationsScreen extends React.Component { static navigationOptions = { title:'通知', drawerLabel: '通知', drawerIcon: ({ tintColor }) => ( <image></image> ), }; render() { return ( <view> <button> this.props.navigation.navigate('DrawerOpen')} title="点击打开侧滑菜单" /> <button> this.props.navigation.goBack()} title="返回我的界面" /> </button></button></view> ); } } const styles = StyleSheet.create({ tabIcon: { width: 24, height: 24, }, }); export default MyNotificationsScreen;
(5) Run
and report an error? This is the pit we mentioned above~
What is the reason? It turns out to be a bug in the beta version. Find line 12 of node_modules/react-navigation/src/views/Header.js in the directory. Delete it and it will be OK~
Ps: Unfortunately, I don’t have this error. Leave a picture~ When I am about to publish this article, the latest version has changed to (v1.0.0-beta.9), and the latest version has modified the above bug!
Okay, run it again~
Last dynamic rendering:
I believe you have mastered the method after reading the case in this article. For more exciting content, please pay attention to other related articles on the php Chinese website!
Recommended reading:
How to use vue to implement the 2048 mini game
How to use VeeValidate to perform form validation in the vue project Check function
The above is the detailed content of react-navigation use case analysis. For more information, please follow other related articles on the PHP Chinese website!

Python解析XML中的特殊字符和转义序列XML(eXtensibleMarkupLanguage)是一种常用的数据交换格式,用于在不同系统之间传输和存储数据。在处理XML文件时,经常会遇到包含特殊字符和转义序列的情况,这可能会导致解析错误或者误解数据。因此,在使用Python解析XML文件时,我们需要了解如何处理这些特殊字符和转义序列。一、特殊字符和

Python编程解析百度地图API文档中的坐标转换功能导读:随着互联网的快速发展,地图定位功能已经成为现代人生活中不可或缺的一部分。而百度地图作为国内最受欢迎的地图服务之一,提供了一系列的API供开发者使用。本文将通过Python编程,解析百度地图API文档中的坐标转换功能,并给出相应的代码示例。一、引言在开发中,我们有时会涉及到坐标的转换问题。百度地图AP

使用Python解析SOAP消息SOAP(SimpleObjectAccessProtocol)是一种基于XML的远程过程调用(RPC)协议,用于在网络上不同的应用程序之间进行通信。Python提供了许多库和工具来处理SOAP消息,其中最常用的是suds库。suds是Python的一个SOAP客户端库,可以用于解析和生成SOAP消息。它提供了一种简单而

随着PHP8.0的发布,许多新特性都被引入和更新了,其中包括XML解析库。PHP8.0中的XML解析库提供了更快的解析速度和更好的可读性,这对于PHP开发者来说是一个重要的提升。在本文中,我们将探讨PHP8.0中的XML解析库的新特性以及如何使用它。什么是XML解析库?XML解析库是一种软件库,用于解析和处理XML文档。XML是一种用于将数据存储为结构化文档

使用Python解析带有命名空间的XML文档XML是一种常用的数据交换格式,能够适应各种应用场景。在处理XML文档时,有时会遇到带有命名空间(namespace)的情况。命名空间可以防止不同XML文档中元素名的冲突,提高了XML的灵活性和可扩展性。本文将介绍如何使用Python解析带有命名空间的XML文档,并给出相应的代码示例。首先,我们需要导入xml.et

PHP中的HTTPBasic鉴权方法解析及应用HTTPBasic鉴权是一种简单但常用的身份验证方法,它通过在HTTP请求头中添加用户名和密码的Base64编码字符串进行身份验证。本文将介绍HTTPBasic鉴权的原理和使用方法,并提供PHP代码示例供读者参考。一、HTTPBasic鉴权原理HTTPBasic鉴权的原理非常简单,当客户端发送一个请求时

PHP爬虫是一种自动化获取网页信息的程序,它可以获取网页代码、抓取数据并存储到本地或数据库中。使用爬虫可以快速获取大量的数据,为后续的数据分析和处理提供巨大的帮助。本文将介绍如何使用PHP实现一个简单的爬虫,以获取网页源码和内容解析。一、获取网页源码在开始之前,我们应该先了解一下HTTP协议和HTML的基本结构。HTTP是HyperText

PHP中的单点登录(SSO)鉴权方法解析引言:随着互联网的发展,用户通常要同时访问多个网站进行各种操作。为了提高用户体验,单点登录(SingleSign-On,简称SSO)应运而生。本文将探讨PHP中的SSO鉴权方法,并提供相应的代码示例。一、什么是单点登录(SSO)?单点登录(SSO)是一种集中化认证的方法,在多个应用系统中,用户只需要登录一次,就能访问


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function

VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

SublimeText3 Chinese version
Chinese version, very easy to use
