react-navigation使用案例解析

顺亿

2026-09-25 • 👁 0人浏览过

这次给大家带来react-navigation使用案例解析，react-navigation使用的注意事项有哪些，下面就是实战案例，一起来看一下。一、主要构成按使用形式主要分三部分: StackNavigator: 类似于普通的Navigator，屏幕上方导航栏 TabNavigator: 相当于ios里面的TabBarController，屏幕下方的标签栏 DrawerNavigator: 抽屉效果，侧边滑出二、使用 1.新建项目

react-native init ComponentDemo

2. 在应用中安装此库

npm install --save react-navigation

安装完发现是beta版本(v1.0.0-beta.7) ，竟然有坑?！一会儿我们会详细说这个坑~ 3.测试TabNavigator、StackNavigator和DrawerNavigator （1）新建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!

（2）新建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;

（3）新建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

（4）编写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 (

（5）运行报错啦？这就是上面我们所说的坑~ 什么原因呢？原来是测试版的bug，在目录中找到node_modules/react-navigation/src/views/Header.js的第12行，删除它就OK了~ Ps：遗憾的是这个错误我没有留图啊~在我即将发表这篇文章的时候，最新版已经变为(v1.0.0-beta.9)了，最新版已经将上述的bug修改了！好了，再次运行~ 上一个动态效果图：相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！推荐阅读：怎样使用vue实现2048小游戏如何使用VeeValidate在vue项目内进行表单校验功能