官方推荐react-navigation的具体使用详解
程序员文章站
2022-03-14 18:21:50
看了官方文档的导航器对比,发现现在主推的方案是一个单独的导航库react-navigation,据说它的使用十分简单。我就写个demo,试了一下。
一、主要构成
按使用...
看了官方文档的导航器对比,发现现在主推的方案是一个单独的导航库react-navigation,据说它的使用十分简单。我就写个demo,试了一下。
一、主要构成
按使用形式主要分三部分:
- 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 ( <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,可以阅读这一篇英文的,希望对你们有所帮助~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。