有一个需求是这样的. 一个组件里若干个区块.区块数量不定. 区块里面是一个波浪效果组件,而这个一般用 SVG 做. 所以就变成了在 react 中使用 SVG 的问题. 首先是波浪效果需要的样式. .p{ font-size: 12px; line-height: 2; text-align: center; margin:0; width: 52px; color: #fff; } .irrigate_svg { height: 52px; width: 52px; } .masked { -…

有一个需求是这样的. 一个组件里若干个区块.区块数量不定. 区块里面是一个正六边形组件,而这个用 SVG 和 canvas 都可以.我选择 canvas. 所以就变成了在 react 中使用 canvas 的问题. canvas 和 SVG 有一个很大的不同. SVG 是标签,所以HTML怎么整,SVG 就怎么整. 而 canvas 是一套相对独立的 web API,以 canvas 标签为容器(HTML接口). 所以在 react 中处理 canvas 类似于在 react 中处理第三方DOM…

前言 Create React App npm install -g create-react-app create-react-app my-app cd my-app npm start 执行命令后新建项目:study-react 可以看下项目基本目录: 工程目录介绍 [node_modules] 项目依赖的包文件都在这里 [package.json] { "name": "study-react", // 项目名称 "version": &…

https://up2.v.sharedaka.com/video/ochvq0AVfpa71A24bmugS5EewhFM1553702519936.mp4 01 React出现的历史背景及特性介绍 https://up2.v.sharedaka.com/video/ochvq0AVfpa71A24bmugS5EewhFM1553703186653.mp4 02 以组件方式考虑UI的构建 https://up2.v.sharedaka.com/video/ochvq0AVfpa71A24bmu…

此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 API 的介绍与代码实战,以及 React Native 与 iOS.Android 平台的混合开发底层原理讲解与代码实战演示,精选了大量实例代码,方便读者快速学习. 书籍还配套了视频教程「80 节实战课精通 React Native 开发」,此视频课程建议配合书籍学习,书籍中原理性的东西讲解的比较清晰,而…

RN 实战 & React Native 实战 https://abc.xgqfrms.xyz/react-native-docs/ 0.59 https://github.com/xgqfrms/react-native-docs/blob/master/docs/getting-started.md React Native Navigation React Native Navigation provides 100% native platform navigation on both…

React实战之将数据库返回的时间转换为几分钟前.几小时前.几天前的形式. 不知道大家的时间格式是什么样子的,我先展示下我这里数据库返回的时间格式 ‘2019-05-05T15:52:19Z’ 是这个样子的,然后上代码: 在utils文件下创建文件time.js文件 time.js export default function time(UTCtiem) { var T_pos = UTCtiem.indexOf('T'); var Z_pos = UTCtiem.indexOf('Z');…

React实战之Ant Design—Upload上传_附件上传 Upload组件大家都在官方文档中看过了,但写的时候还是会遇到许多问题,一些新手看了文档后感觉无从下手,本文过多的简绍就不说了,直接看代码和注释,直接用就行 我直接放在form表单中,因为实战中单个附件上传很少几,乎都在form表单中加入一个附件上传所以为了更好的应用,我直接就放在form表单中应用 import React, { PureComponent } from 'react'; import {Form, Button…

React实战之60s倒计时按钮——短信验证按钮 导入:(antd组件——Form表单) import { Button, Form, Input } from 'antd'; const FormItem = Form.Item; state = { loading: false, yztime: , }; //倒计60s count = () => { let { yztime } = this.state; let siv = setInterval(() => { this.setSt…

import React from 'react'; import _ from 'lodash'; import styles from './iconPicker.less'; const requireContext = require.context('annotation/draw/svgs/', false, /^\.\/.*\.svg$/); export default class extends React.PureComponent { render() { return (…