在完成一个需求的时候碰到一个场景需要使用柱状图。涉及到可视化，第一反应当然是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);可以实现...
在web开发中，我们通常需要使用定时器功能，使用setTimeout和setInterval函数。那么在ReactNative中，是否也提供了定时器的功能呢？ 答案是肯定的。 我们还是先看看官网怎么说的。定时器是一个应用中非常重要的部分。React Native实现了和浏览器一致的定时器Timer。 提供的方法如下： setTimeout, clearTimeoutsetInterval, clearIntervalsetImmediate, clearImmediaterequestAnimationFrame, cancelAnimationFramesetTimeout (fn,...
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...
本文内容：react-native-fs的简单使用 下载文件(图片、文件、视频、音频)将文本写入本地 txt读取txt文件内容在已有的txt上添加新的文本删除文件上传文件 only iOSgithub链接: https://github.com/itinance/react-native-fs另外还有一个下载的库 ：https://github.com/wkh237/react-native-fetch-blob安装步骤 第一步： npm install react-native-fs --save 第二步： react-native link react-native-fsOK 即可开始使用(不放心的可以...
WebView是ReactNative中的组件 , 它可以创建一个原生的WebView，可以用于访问一个网页.有时候我们需要在RN与WebView之间进行通信,或者进行数据传递,或者发送消息通知.这时候就要用以下知识了.一:WebView向RN端发送数据:首先,我们构建一个webview:<WebViewref={webview}source={require(./index.html)}style={{width: 375, height: 220}}onMessage={(e) => {this.handleMessage(e)}}/>可以看到其中有一个onMessage方法,onMessage fu...
一：左右联动List,在工作中很常见。今天分享一个同事写的例子，本人只做了简单修改。注意：本例子必须修改源码，参考本文第三条。 二：CodingParcelPage.js: import React, { Component } from react; import {AppRegistry,StyleSheet,Text,View,FlatList,SectionList,Dimensions,TouchableOpacity,Image, } from react-native;import ParcelData from ./ParcelData.jsonvar { width, height } = Dimensions.get(window);let Heade...
本教程的实现效果如下:为了实现其淡入/淡出的覆盖效果, 还有取消按钮, 在此用了一个三方的组件, 大家可以先安装一下:三方组件的地址:https://github.com/eyaleizenberg/react-native-custom-action-sheet (可以看看,也可以直接按我的步骤走) 1. 在terminal的该工程目录下运行: npm install react-native-custom-action-sheet --save 2. 然后运行: npm start 3. 具体实现代码如下:import React, { Component } from react; import ...
react native实现登录功能，包括ui的封装、网络请求的封装、导航器的实现、点击事件。 demo下载：react-native 完整实现登录功能 后台如果是springmvc实现的需要配置上如下代码<!--加入multipart 的解析器,这个必须配置，一会在controller里抓取上传文件时要用。否则会报错。--><bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><property name="maxUploadSize" value="...
要做的效果很简单，如下图所示：使用基本教程 1.引入组件 import TabNavigator from react-native-tab-navigator;Github上的地址 2.render方法中返回： render() { return ( <View style={styles.container} > <TabNavigator> <TabNavigator.Item selected={this.state.selectedTab === 电影} title="电影" titleStyle={styles.tabText} selectedTitleStyle={styles.selectedTabText} renderIcon={() => <Image style={styles.icon...