zoukankan      html  css  js  c++  java
  • react-native + teaset 实现 Tabbar

    1.代码

    src/pages/MainPage/index.js

    /**
     * 主页面
     */
    import React, {Component} from 'react';
    import {
      BackHandler, // 物理返回键
      View,
      ToastAndroid
    } from 'react-native';
    /**
     * @inject 注入需要的store
     * @observer 修饰react组件类
     */
    import { inject, observer } from 'mobx-react';
    import { TabView, Button } from 'teaset';
    // 首页
    import HomePage from './HomePage';
    // 购物车
    import ShopCarPage from './ShopCarPage';
    // 我的
    import MinePage from './MinePage';
    // 图片资源
    import { images } from '../../res';
    
    export default class MainPage extends Component {
    
      constructor(props) {
        super(props);
        this.state = {
          activeIndex: 0
        };
      }
    
      render() {
        return (
          <View style={{flex: 1}}>
            <TabView
              style={{flex: 1}}
              type='projector'
              activeIndex={this.state.activeIndex}
              onChange={this.onTabChange}
            >
              <TabView.Sheet
                title='首页'
                icon={images.ic_home}
              >
                <HomePage />
              </TabView.Sheet>
    
              <TabView.Sheet
                title='购物车'
                icon={images.ic_cart}
                badge={2}
              >
                <ShopCarPage />
              </TabView.Sheet>
    
              <TabView.Sheet
                title='我的'
                icon={images.ic_mine}
              >
                <MinePage />
              </TabView.Sheet>
            </TabView>
          </View>
        );
      }
    
      // 底部导航切换事件
      onTabChange = (index) => {
        this.setState({activeIndex: index})
      };
    }
    

    2.效果图

  • 相关阅读:
    python 玩转列表list
    Python入门之_水仙花数
    自兴人工智能 字符串
    自兴人工智能 元组
    自兴人工智能 列表
    自兴人工智能 python特点了解
    python走迷宫
    (自兴人工智能) python 元组
    (自兴人工智能) 玩转 python 字符串
    (自兴人工智能)Python 列表(List)的灵活使用
  • 原文地址:https://www.cnblogs.com/crazycode2/p/9530889.html
Copyright © 2011-2022 走看看