Ant Design Mobile ——TabBar 标签栏的使用

前言

对于Ant Design(移动端)TabBar的使用,一直有bug,百度了很多博客,都没找到解决方法,琢磨了一个小时,写下这篇博客,希望对小白有所帮助,不足之处还请指点一二。
废话不多说,使用之前,别进行弹射,别进行弹射,别进行弹射,最好是初始化的新项目

安装和初始化

$ npm install -g create-react-app

# 注意:工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖,如果在过程中出现网络问题,请尝试配置代理或使用其他 npm registry。
$ create-react-app my-app

$ cd my-app
$ npm start

项目创建成功后,进行安装 Ant Design Mobile

一、安装

$ npm install antd-mobile --save

二、入口页面 (html 或 模板) 相关设置:

这里的入口页面指 public 目录中的 index.html

<!DOCTYPE html>
<html>
<head>
  <!-- set `maximum-scale` for some compatibility issues -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  // 第一个需要添加的 
  <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
  // 第二个需要添加的 
  <script>
    if ('addEventListener' in document) {
      document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
      }, false);
    }
    if(!window.Promise) {
      document.writeln('
                    
                    

你可能感兴趣的:(React,react,reactjs,前端,npm)