欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-14 18:21:50
看了官方文档的导航器对比,发现现在主推的方案是一个单独的导航库react-navigation,据说它的使用十分简单。我就写个demo,试了一下。 一、主要构成 按使用...

看了官方文档的导航器对比,发现现在主推的方案是一个单独的导航库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/bar_home_nomarl@3x.png')}
            style={[{tintcolor: tintcolor},styles.icon]}
          />
        ),
      },
    }
  },
  certificate: {
    screen: minepage,
    navigationoptions: {
      tabbar: {
        label: '我的',
        icon: ({tintcolor}) => (
          <image
            source={require('./image/bar_center_normal@3x.png')}
            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/chat@3x.png')}
      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/notif@3x.png')}
        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的具体使用详解

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

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