Summary of react-navigation usage (with code)-JS Tutorial-php.cn

This time I will bring you a summary of the use of react-navigation (with code), what are theprecautionswhen using react-navigation, the following is a practical case, let's take a look.

After reading the navigator comparison in the official documents, I found that the currently recommended solution is a separate navigation library react-navigation. It is said that its use is very simple. I wrote a demo and tried it.

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

Copy after login

2. Install this library in the application

npm install --save react-navigation

Copy after login

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 (  Hello, Navigation!

Copy after login

(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 (  Chat with {params.user}  ); } } export default ChatScreen;

Copy after login

(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 }) => (  ), }; render(){; return(  Sybil

Copy after login

(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 }) => (  ), }; render() { return (

Copy after login

(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!