专栏首页finleyMa使用react-native-tab-navigator切换页面

使用react-native-tab-navigator切换页面

切换页面是app最基本功能。这个功能需要用Navigation组件实现。 RN发展太快了(v49),之前自带的Navigation组件被弃用了,如果只针对ios,还可以用NavigatorIOS 社区中也有几个不错的 https://github.com/react-community/react-navigation https://github.com/wix/react-native-navigation https://github.com/happypancake/react-native-tab-navigator 以react-native-tab-navigator为例,实现下面的tab切换效果很容易:

demo.gif

完整代码如下,其实就是把文档中的例子稍微调整下。

import React from 'react';
import TabNavigator from 'react-native-tab-navigator';
import { StyleSheet, Text, Button, TextInput, View, Alert, Image } from 'react-native';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {selectedTab: 'home'};
  }

  render() {
    return (
      <View style={styles.container}>
        <TabNavigator>
          <TabNavigator.Item
            selected={this.state.selectedTab === 'home'}
            title="最热"
            renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_polular.png')} />}
            renderSelectedIcon={() => <Image style={styles.image} source={require('./res/images/ic_polular.png')} />}
            badgeText="1"
            onPress={() => this.setState({ selectedTab: 'home' })}>
            <View style={styles.page1}></View>
          </TabNavigator.Item>
          <TabNavigator.Item
            selected={this.state.selectedTab === 'profile'}
            title="趋势"
            renderIcon={() => <Image style={styles.image} source={require('./res/images/ic_trending.png')} />}
            renderSelectedIcon={() => <Image style={styles.image} source={require('./res/images/ic_trending.png')} />}
            onPress={() => this.setState({ selectedTab: 'profile' })}>
            <View style={styles.page2}></View>
          </TabNavigator.Item>
        </TabNavigator>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  page1: {
    flex: 1,
    backgroundColor: 'red'
  },
  page2: {
    flex: 1,
    backgroundColor: 'yellow'
  },
  image: {
    height: 22,
    width: 22
  }
});

默认选中名为home的tab。点击可以切换。 通过StyleSheet给元素设置样式。 需要注意的:

  1. 尺寸不要设置单位,在RN中尺寸与设备无关。
  2. 图片是透明png,可在这下载
  3. 如ic_polular.png的尺寸是5757, ic_polular@2x.png的尺寸是114114。只引入最基本的ic_polular.png,只要按这种命名规则在不同设备会自动适配(待验证)。
  image: {
    height: 22,
    width: 22
  }

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React 技巧及学习资料

    https://doc.react-china.org/ 翻译后的官方文档,学技术一定要多看几遍文档

    mafeifan
  • react学习系列4 组件生命周期

    组件的生命周期非常重要。官方文档 已经就讲的比较清楚了 找了半天发现下面的图最清晰直观(点击放大):

    mafeifan
  • 4. Rxjs 介绍及注意事项

    先梳理一些概念: Rx:ReactiveX是Reactive Extensions的缩写,一般简写为Rx,最初是LINQ的一个扩展,由微软的架构师Erik M...

    mafeifan
  • 【React】377- 实现 React 中的状态自动保存

    移动端中,用户访问了一个列表页,上拉浏览列表页的过程中,随着滚动高度逐渐增加,数据也将采用触底分页加载的形式逐步增加,列表页浏览到某个位置,用户看到了感兴趣的项...

    pingan8787
  • 美国或解除禁令?中兴回应:消息属实

    新智元
  • 从0到1,马蜂窝大交通团队如何构建高效研发流程体系?

    2019年5月,马蜂窝完成了新一轮融资,金额达2.5亿美元。这也标志着通过集内容、社区、交易为一体的消费决策场景构建,从攻略社区起家的马蜂窝开始迈入在线旅游行业...

    TAPD敏捷研发
  • NVIDIA 下一代 Pascal GPU 預計於明年推出

    NVIDIA 於美國矽谷舉辦的 GTC 2015 大會上,率先揭露明年推出的 Pascal 架構,相較於當前的 Maxwell 處理器, Pascal 架構 G...

    GPUS Lady
  • 一个老程序员的忠告

    1 .工作当性能遇到问题时,如果可以计算并处理应用程序层,则将其从数据库层中取出。分类和分组是典型的例子。在应用程序层上执行性能改进总是比在数据库层中容易。与M...

    企鹅号小编
  • LSTM内部实现原理详解

    原文链接:https://blog.csdn.net/shenxiaoming77/article/details/7...

    superhua
  • 每天上班忙成狗,这 4 款小程序,帮你减减压

    大多数人都把有限的精力,投入到无限的工作或者娱乐当中,忽略了大脑的休息,导致工作效率低下,状态不好等问题。

    知晓君

扫码关注云+社区

领取腾讯云代金券