React项目实战二

1, 实现tabBar

image

• 1,使用步骤
  • 1，打开antd-mobile组件中的TabBar组件的文档
  • 2，选择App选项卡菜单，点击(</>)显示源码
  • 3，拷贝核心代码到Home组件中，并稍微改动、优化后代码

  import Index from '../Index'
  import News from '../News'
  import HouseList from '../HouseList'
  import Profile from '../Profile'
  import { TabBar } from 'antd-mobile';
  const navList = [
    {
      title: '首页',
      icon: 'icon-ind',
      path: '/home/index'
    },
    {
      title: '找房',
      icon: 'icon-findHouse',
      path: '/home/list'
    },
    {
      title: '资讯',
      icon: 'icon-infom',
      path: '/home/news'
    },
    {
      title: '我的',
      icon: 'icon-my',
      path: '/home/profile'
    }
  ]
  class Home extends React.Component {
    state = {
      selectedTab: this.props.location.pathname,
    };
  
    renderTabBarItem() {
      return navList.map(item => <TabBar.Item
        title={item.title}
        key={item.title}
        icon={
          <i className={`iconfont ${item.icon}`}></i>
        }
        selectedIcon={
          <i className={`iconfont ${item.icon}`}></i>
        }
        selected={this.state.selectedTab === item.path}
        onPress={() => {
          this.setState({
            selectedTab: item.path,
          });
  
          // 路由切换
          this.props.history.push(item.path)
        }}
      >
      </TabBar.Item>)
    }
  
    renderContent(pageText) {
      return (
        <div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
          <div style={{ paddingTop: 60 }}>Clicked “{pageText}” tab， show “{pageText}” information</div>
          <a style={{ display: 'block', marginTop: 40, marginBottom: 20, color: '#108ee9' }}
            onClick={(e) => {
              e.preventDefault();
            }}
          >
            Click to show/hide tab-bar
          </a>
          <a style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
            onClick={(e) => {
              e.preventDefault();
            }}
          >
            Click to switch fullscreen
          </a>
        </div>
      );
    }
  
    render() {
      return(
          <div className="home">
            <Route path="/home/index" component={Index}/>
            <Route path="/home/news" component={News}/>
            <Route path="/home/list" component={HouseList}/>
            <Route path="/home/profile" component={Profile}/>
            <TabBar
              tintColor="#21b97a"
              barTintColor="white"
              noRenderContent={true}
            >
              {this.renderTabBarItem()}
            </TabBar>
          </div>
      )
    }
  }
  

首页路由处理

• 修改首页路由规则为: /home (去掉/index)

<Route exact path="/home" component={Index}/>

• 配合默认路由，实现默认跳转到/home

<Route path="/" exact render={() => <Redirect to="/home"/>} />
// render属性：是一个函数prop，用于指定要渲染的内容
// Redirect组件用于实现路由重定向，to属性指定要跳转的路由地址

image

首页模块实现

• 1，轮播图
  • 1，打开antd-mobile组件库的Carousel组件文档
  • 2,选择基本，点击(</>)显示源码
  • 3，拷贝核心代码
  • 4，分析并调整代码，让其能够在项目中正常运行

touch-action: pan-y; // 去掉轮播图 chrome浏览器的错误警告

获取轮播图数据

• 1，安装axios: yarn add axios
• 2,在组件中导入axios
• 3,在state中添加轮播图数据：swipers
• 4,新建一个方法getSwipers用来获取轮播图数据，并更新swipers状态
• 5，在componentDidMount钩子函数中调用该方法
• 6，使用获取到的数据渲染轮播图

import axios from 'axios';
class Index extends React.Component {
  state = {
    // 轮播图状态数据
    swipers: [],
  }

  // 获取轮播图数据的方法
  async getSwipers(){
    const res = await axios.get('http://localhost:8080/home/swiper')
    // this.setState(() => {
    //   return {
    //     swipers: res.data.body
    //   }
    // })
    // 或者
    this.setState({
      swipers: res.data.body
    })
    
    
  }
  componentDidMount() {
    this.getSwipers()
    // simulate img loading
    // setTimeout(() => {
    //   this.setState({
    //     data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
    //   });
    // }, 100);
  }

  // 渲染轮播图结构方法
  renderSwipers () {
    return this.state.swipers.map(item => (
      <a
        key={item.id}
        href="http://www.alipay.com"
        style={{ display: 'inline-block', width: '100%',}}
      >
        <img
          src={`http://localhost:8080${item.imgSrc}`}
          alt=""
          style={{ width: '100%', verticalAlign: 'top' }}
          onLoad={() => {
            // fire window resize event to change height
            window.dispatchEvent(new Event('resize'));
            this.setState({ imgHeight: 'auto' });
          }}
        />
      </a>
    ))
  }
  render() {
    return (
      <div className="index">
        <Carousel
          autoplay={false}
          infinite={true}
          autoplayInterval={10000}
        >
          {this.renderSwipers()}
        </Carousel>
      </div>
    );
  }
  }

image