前言：此文需要有一定react，redux基础，具体学习资料请科学上网。 使用create-react-app脚手架 具体基础配置请参考 配合antd组件实现的管理系统demo,线上地址 开发前反思 1. 按需加载 webpack的 import 动态加载的模块的函数，import(参数)，参数为模块地址。 注意： import 后会返回一个promise对象。 import(/components/chart).then(mud => {dosomething(mod) }); 本demo构建了异步加载组件Bundle,具体代码请见 class Bundle e...
本文介绍了react-native 圆弧拖动进度条实现的示例代码，分享给大家，具体如下： 先上效果图因为需求需要实现这个效果图 非原生实现， 难点1：绘制 使用svg难点2：点击事件的处理难点3：封装由于绘制需要是使用svg 此处自行百度 按照svg以及api 教学 视图代码块render() {return (<View pointerEvents={box-only}//事件处理{...this._panResponder.panHandlers}>//实际圆环{this._renderCircleSvg()}// 计算中心距离<Viewstyle={{p...
本文介绍了使用react实现手机号的数据同步显示功能的示例代码，分享给大家，具体如下：要求如下 输入框输入内容数据长度大于0，展示出预览信息光标离开关闭预览信息预览信息每隔4位插入一个特殊字符_,输入内容不变限制长度为13位只允许输入数字（0-9）// Zinput.js import React, {Component } from react; import ./Zinput.css// NOTE: 获取焦点事件 原生onFocus 即可 // NOTE: 离开焦点事件 原生onBlur即可 // NOTE: 输入框数据过...
React Native悬浮按钮组件：react-native-action-button，纯JS组件，支持安卓和IOS双平台，支持设置子按钮，支持自定义位置和样式和图标。效果图安装方法npm i react-native-action-button --save react-native link react-native-vector-icons因为用到了react-native-vector-icons图标组件，需要做下link。如果你项目中已经使用了react-native-vector-icons，那就不需要这步了。 示例代码<View style={styles.container}><Text st...
本文介绍了React Native使用fetch实现图片上传的示例代码，分享给大家，具体如下：普通网络请求参数是JSON对象 图片上传的请求参数使用的是formData对象 使用fetch上传图片代码封装如下： let common_url = http://192.168.1.1:8080/; //服务器地址 let token = ; //用户登陆后返回的token /** * 使用fetch实现图片上传* @param {string} url 接口地址* @param {JSON} params body的请求参数* @return 返回Promise */ function up...
React Native 截屏组件：react-native-view-shot，可以截取当前屏幕或者按照当前页面的组件来选择截取，如当前页面有一个图片组件，一个View组件，可以选择截取图片组件或者View组件。支持iOS和安卓。 安装方法 npm install react-native-view-shot react-native link react-native-view-shot使用示例 captureScreen() 截屏方法 截取当前屏幕，跟系统自带的截图一致，只会截取当前屏幕显示的页面内容。如果是ScrollView，那么未显示...
我们在项目中经常会用到HTTP请求来访问网络，HTTP(HTTPS)请求通常分为"GET"、"PUT"、"POST"、"DELETE"，如果不指定默认为GET请求。 在项目中我们常用到的一般为GET和POST两种请求方式，针对带参数的表单提交这类的请求，我们通常会使用POST的请求方式。 为了发出HTTP请求，我们需要使用到 React Native 提供的 Fetch API 来进行实现。要从任意地址获取内容的话，只需简单地将网址作为参数传递给fetch方法即可（fetch这个词本身也就...
在完成一个需求的时候碰到一个场景需要使用柱状图。涉及到可视化，第一反应当然是Echarts了。平时用js加载Echarts组件很方便，但是在React中就要费下神了。各种连蒙带猜实现了。edmo里的 这里我们要在自己搭建的react项目中使用ECharts，我们可以在ECharts官网上看到有一种方式是在 webpack 中使用 ECharts，我们需要的就是这种方法。 我们在使用ECharts之前要先安装ECharts，在以往的开发模式中，我们很多使用就是把官网中的EChar...
Echarts是百度推出的免费开源的图表组件，功能丰富，涵盖各行业图表。相信很多同学在网页端都使用过。今天我就来介绍下在React Native中如何使用Echarts来显示各种图表。首先需要在我们的React Native项目中安装native-echarts组件，该组件是兼容IOS和安卓双平台的。 安装npm install native-echarts --save安装完成后在node_modules文件夹下会多出一个文件夹叫native-echarts。目录结构如下图所示： 基础使用native-echarts的使...
最近在项目中添加了语言国际化的功能。 语言国际化，也有人说成是语言本地化，其实就是为Web App添加多语言，我们的项目当前包含了中文版和英文版，按理来说『逐字替换』也不是多大事儿，但是，这么Low的做法，有钱途吗？ 一开始的时候，我考虑的是传统的为整个项目添加config文件，根据不同的语言和地区，加载不同的config文件，就能够达到界面语言切换的目的。当然，也正是因为这个想法太过于幼稚，所以才被称为『一开始』的想法...
在很多App中都会涉及到分享，React Native提供了Modal组件用来实现一些模态弹窗，例如加载进度框，分享弹框等。使用Modal搭建分析的效果如下： 自定义的分析界面代码如下： ShareAlertDialog.js /*** https://github.com/facebook/react-native* @flow 分享弹窗*/import React, {Component} from react; import {View, TouchableOpacity, Alert,StyleSheet, Dimensions, Modal, Text, Image} from react-native; import Separator ...
前言：算起来已经有一个多月没有写博客了，近来懈怠了不少，也不知道要写些什么，最近学了一段时间的React，一直都在看些理论性的知识，总觉得应该写个什么来练练手，所以还是拿个简单的todoList来举个例子吧！ 一. 首先根据效果图讲一下要实现的功能吧todoList最终效果图（1）可以添加任务； （2）已完成任务以及未完成任务的颜色区分开； （3）进行添加任务，修改任务状态，以及删除任务时，下面的任务完成数目和任务总数要进行变...
有时对于响应式布局，我们需要根据组件的宽度自适应高度。CSS无法实现这种动态变化，传统是用jQuery实现。而在React中无需依赖于JQuery,实现相对比较简单，只要在DidMount后更改width即可Try on Codepen需要注意的是在resize时候也要同步变更，需要注册个监听器class Card extends React.Component {constructor(props) {super(props);this.state = {width: props.width || -1,height: props.height || -1,}}componentDidMount() {...
之前有写过类似的一篇文章，有位同学突然找来解惑，发现自己采用了另外的一个方法，这里也分享下，希望对使用reactjs的同学有帮助。 逻辑思路是这样子的，在componentDidMount中实现更新dom的操作，异步加载需要的资源文件，然后在加载完后实现qiniu的初始化操作。这里就不需要在webpack或者其他打包工具中去引入qiniu的包文件，导致打完包的文件过大了。 我这里使用了nodejs的库scriptjs， const $S = require(scriptjs);可以实现...
react.js我自己还在摸索学习中，碰到父子组件数据绑定实时通讯的问题，研究了一下，分享给大家，也给自己留个笔记：import React,{Component} from react import ReactDOM from react-domclass ChildCounter extends Component{render(){return(<div style={{border:1px solid red}}>{this.props.count}</div>)} } /* * 大家默认规定的一些步骤，方便大家看 * 1.默认值 * 2.初始化状态 * 3.钩子函数 * 4.方法函数 * */ class Count...