react-navigation的使用

react-navigation分为三个部分

  • StackNavigator类似顶部导航条,用来跳转页面和传递参数。
  • TabNavigator 类似底部标签栏,用来区分模块。
  • DrawerNavigator 抽屉,类似从App左侧滑出一个页面,具体我没有使用过,在这里不做讲解。

TabNavigator的基本用法

const TabNav = TabNavigator(
  {
    MainTab: {
      screen: HomePage,
      path: '/',
      navigationOptions: {
        title: '首页',
        // tabBarLabel: '首页',
        tabBarIcon: ({ tintColor, focused }) => (
          focused
                    ?
                    <Image
                        source={require('../images/tab_icon_homes@2x.png')}
                    />
                    :
                    <Image
                        source={require('../images/tab_icon_home@2x.png')}
                    />
        ),
      },
    },
    MinePage: {
      screen: MinePage,
      path: '/settings',
      navigationOptions: {
        title: '我的',
        tabBarIcon: ({ tintColor, focused }) => (
        focused
                    ?
                    <Image
                        source={require('../images/tab_icon_usercenters@2x.png')}
                    />
                    :
                    <Image
                        source={require('../images/tab_icon_usercenter@2x.png')}
                    />
        ),
      },
    },
  },
  {
    tabBarPosition: 'bottom',
    animationEnabled: false,
    swipeEnabled: false,
    tabBarOptions:{
        activeTintColor: '#5c6de5', // 改变tabBar选中字体颜色
        // inactiveTintColor: '#CC9999', // 文字和图片默认颜色
        // showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
        // indicatorStyle: {
        //     height: 0
        // }, // android 中TabBar下面会显示一条线,高度设为 0 后就不显示线了, 不知道还有没有其它方法隐藏???
        // style: {
        //     backgroundColor: '#FFFF99', // TabBar 背景色
        // },
        // labelStyle: {
        //     fontSize: 12, // 文字大小
        // },
    }
  }
);

StackNavigator的基本用法

const StacksOverTabs = StackNavigator({
  Root: {
    screen: TabNav,
  },
  TwoPage: {
    screen: TwoPage,
    navigationOptions: {
      title: '二级页面',
    },
  },
  Profile: {
    screen: FirstPage,
    path: '/people/:name',
    navigationOptions: ({ navigation }) => {
      title: `${navigation.state.params.name}'s Profile!`;
    },
  },
});

export default StacksOverTabs;

界面之间跳转

const MyNavScreen = ({ navigation, banner }) => (
  <ScrollView>
    <SampleText>{banner}</SampleText>
    <Button
    // 界面之间传值
      onPress={() => navigation.navigate('Profile', { name: 'Jordan' })}
      title="去第一个页面"
    />
    <Button
      onPress={() => navigation.navigate('TwoPage')}
      title="去二级页面"
    />
    <Button
      onPress={() => navigation.navigate('MinePage')}
      title="去我的页面"
    />
    <Button onPress={() => navigation.goBack(null)} title="返回" />
  </ScrollView>
);

const HomePage = ({ navigation }) => (
  <MyNavScreen banner="我是首页" navigation={navigation} />
);

const FirstPage = ({ navigation }) => (
  <MyNavScreen
    banner={`${navigation.state.params.name}s Profile`}
    navigation={navigation}
  />
);

const TwoPage = ({ navigation }) => (
  <MyNavScreen banner="我是二级页面" navigation={navigation} />
);

const MinePage = ({ navigation }) => (
  <MyNavScreen banner="我是我的页面" navigation={navigation} />
);

效果图:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Windows Community

Windows Phone 8.1 新特性 - 控件之FlipView

本篇为大家介绍 Windows Phone 8.1 中新增的 FlipView 控件,它的中文名字叫做:翻转视图。 虽然听起来有点拗口,但是它的用途大家一定不会...

355100
来自专栏抠抠空间

Toastr 通知提示插件

Toastr 简介 jquery toastr 一款轻量级的通知提示框插件。 网页开发中经常会用到提示框,自带的alert样式无法调整,用户体验差。 所以一般通...

42490
来自专栏WindCoder

photoshop技巧之 在排版文字时常会用到的快捷键技巧

这两天兴致来了,又开始了PS学习之旅,看到教程中的思考,不由去网上搜索了一番,暂且记录在这里。

14200
来自专栏happyJared

IDEA快捷键拆解系列(十三):Window篇

  以下是关于Window导航项及其每一子项的拆解介绍,其中,加粗部分的选项是博主认为比较重要的。

34210
来自专栏微信小程序开发

小程序中带图片modal的实现

前言:做小程序经常会遇到弹框提示,大家应该首选wx.showModal,标题、内容、button内容和颜色都可以自己定义,可以说是满足90%的dialog需求。...

64790
来自专栏Thinks

【译】W3C WAI-ARIA最佳实践 -- 控件

手风琴是个垂直罗列的元素组合,例如标签或缩略图,这允许用户切换内容模块的展示。每个标签元素可以被用来展开折叠、暴露隐藏其相关内容。手风琴一般被用来减少页面滚动,...

29630
来自专栏京东技术

Vue拖拽组件开发实例

vue是一套用于构建用户界面的渐进式框架。可以用他来封装单文件组件来开发更为复杂的单页应用。 本文主要是通过封装一个拖拽组件的例子,来分析Vue组件化相关知识。

940130
来自专栏向治洪

React Native导航器之react-navigation使用

在上一节Navigation组件,我们使用系统提供的导航组件做了一个跳转的例子,不过其实战能力不强,这里推荐一个超牛逼的第三方库:react-navigatio...

2.1K70
来自专栏24K纯开源

ChartDirector应用笔记(三)

前言 继上篇文章(Simple bar chart)推出之后,本篇文章继续ChartDirector的使用。在这篇Blog中,博主实现的是soft lighti...

245100
来自专栏xingoo, 一个梦想做发明家的程序员

一分钟教你在博客园中制作自己的动态云球形标签页

经常看到别人的博客里面有动态的云标签页,感觉很是高大上,自己也很像弄一个。于是去找寻源码,在阿里西西页面特效中找到了云标签的源码,经过分析和解剖,弄成了符合博...

37780

扫码关注云+社区

领取腾讯云代金券