官方推荐react-navigation的具体使用详解

看了官方文档的导航器对比，发现现在主推的方案是一个单独的导航库react-navigation，据说它的使用十分简单。我就写个demo，试了一下。

一、主要构成

按使用形式主要分三部分:

1. stacknavigator: 类似于普通的navigator，屏幕上方导航栏
2. tabnavigator: 相当于ios里面的tabbarcontroller，屏幕下方的标签栏
3. 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 (
      <view style={styles.container}>
        <text style={{padding:10}}>hello, navigation!</text>
        <button
          onpress={() => navigate('chat',{user:'sybil'})}
          title="点击跳转"/>
      </view>
    )
  }
}
const mainscreennavigator = tabnavigator({
  home: {
    screen: homepage,
    navigationoptions: {
      tabbar: {
        label: '首页',
        icon: ({tintcolor}) => (
          <image
            source={require('./image/[e-mail]')}
            style={[{tintcolor: tintcolor},styles.icon]}
          />
        ),
      },
    }
  },
  certificate: {
    screen: minepage,
    navigationoptions: {
      tabbar: {
        label: '我的',
        icon: ({tintcolor}) => (
          <image
            source={require('./image/[e-mail]')}
            style={[{tintcolor: tintcolor},styles.icon]}
          />
        ),
      },
    }
  },
}, {
  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）新建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 style={{backgroundcolor:'#fff',flex:1}}>
      <text style={{padding:20}}>chat with {params.user}</text>

    </view>

    );
  }
}
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 }) => (
     <image
       source={require('./image/[e-mail]')}
      style={[styles.icon, {tintcolor: tintcolor}]}
     />
   ),
  };
  render(){;
    return(
      <view style={{backgroundcolor:'#fff',flex:1}}>
        <text style={{padding:20}}>sybil</text>
        <button
         style={{padding:20}}
         onpress={() => this.props.navigation.navigate('draweropen')}
         title="点击打开侧滑菜单"
        />
      </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）编写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
        source={require('./image/[e-mail]')}
        style={[styles.tabicon, {tintcolor: tintcolor}]}
      />
    ),
  };

  render() {
    return (
       <view style={{backgroundcolor:'#fff'}}>
        <button
          style={{padding:20}}
          onpress={() => this.props.navigation.navigate('draweropen')}
          title="点击打开侧滑菜单"
        />
        <button
          onpress={() => this.props.navigation.goback()}
          title="返回我的界面"
        />
      </view>
    );
  }
}

const styles = stylesheet.create({
  tabicon: {
    width: 24,
    height: 24,
  },
});

export default mynotificationsscreen;

（5）运行

报错啦？这就是上面我们所说的坑~

什么原因呢？原来是测试版的bug，在目录中找到node_modules/react-navigation/src/views/header.js的第12行，删除它就ok了~

ps：遗憾的是这个错误我没有留图啊~在我即将发表这篇文章的时候，最新版已经变为(v1.0.0-beta.9)了，最新版已经将上述的bug修改了！

好了，再次运行~

上一个动态效果图：

想详细了解react navigation，可以阅读这一篇英文的，希望对你们有所帮助~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。