在React-Native开发中，经常会用到导航。导航做什么用的呢，简单点说就是页面跳转。个项目中，肯定有很多的页面要跳来跳去的，RN就给我们提供了Navigator组件，可以很好的管理页面的跳转。在所有工作做完之后，发现有个bug！在从第一个界面跳转到下一个界面后，如果从屏幕左边向右滑，或者从上面想下滑，你会发现一个神奇的事情，那就是页面会通过滑动而返回到上一个界面。这让我们很尴尬了，本来打算禁止跳转返回的，或者返回时还...
本文将会用typescript+react+react-dropzone+express.js实现前后端上传图片。当然是用typescript需要提前下载相应的模块，在这里就不依依介绍了。 第一步，配置tsconfig.js"compilerOptions": { "outDir": "./public/", "sourceMap": true, "noImplicitAny": true, "module": "commonjs", "target": "es5", "jsx": "react" ,"noImplicitAny": false,"suppressImplicitAnyIndexErrors": true},"files": [ "./views/home/main.tsx" ]...
本文介绍了React复制到剪贴板可以使用插件copy-to-clipboard，分享给大家，具体如下：参考API文档 安装 npm install --save react react-copy-to-clipboard使用 const App = React.createClass({getInitialState() {return {value: , copied: false};},onChange({target: {value}}) {this.setState({value, copied: false});},onCopy() {this.setState({copied: true});},render() {return (<div><h1>CopyToClipboard</h1><input ...
jpush-React-native是极光推送官方维护的一个插件，github地址：https://github.com/jpush/jpush-react-native 一.手动配置 1.集成插件到项目中 npm install jpush-react-native --save rnpm link jpush-react-nativeAndroid 使用 android Studio import 你的 react Native 应用（选择你的 React Native 应用所在目录下的 android 文件夹即可） 修改 android 项目下的 settings.gradle 配置： settings.gradle include :app, :jpus...
由于最近一直在做公司的项目，而且比较急。如今项目已经迭代到第三期，可以缓一缓了。。。 说实话，最近一直再用android做开发，而且时间也不宽裕，react-native有点生疏了。 好了，废话不多说，今天在做登录界面的时候，我发现，登录注册的文本框样式都是一个样的，如果一个一个的写，就会显得有些麻烦了，于是我就简单的封装了一下TextInput这一个组件上图就是我放到登录界面的效果啦。 代码： import React, { Component } from...
本文介绍了React Native仿美团下拉菜单的实例代码，最近也在学习React Native，顺便分享给大家 在很多产品中都会涉及到下拉菜单选择功能，用的最好的当属美团了，其效果如下： 要实现上面的效果，在原生中比较好做，直接使用PopWindow组件即可。如果使用React Native开发上面的效果，需要注意几个问题： 1、 在下拉的时候有动画过度效果； 2、下拉菜单出现后点击菜单项，菜单项可选择，并触发对应的事件； 3、下拉菜单中的项目可以...
在原生APP开发中，相信很多开发者都会见到这种场景：点击右上角更多的选项，弹出一个更多界面供用户选择。这种控件在原生开发中Android可以用PopupWindow实现，在iOS中可以用CMPopTipView,也可以自己写一个View实现。其类似的效果如下图所示： 实现思路分析： 要实现上面的视图，有很多种实现方式。前面的文章说过，要实现弹框相关的可以用React Native 提供的 Modal组件(Modal组件)，使用Modal组件可以实现我们原生开发中的大多数...
城市列表选择是很多app共有的功能，比如典型的美图app。那么对于React Native怎么实现呢？ 要实现上面的效果，首先需要对界面的组成简单分析，界面的数据主要由当前城市，历史访问城市和热门城市组成，所以我们在提供Json数据的时候就需要将数据分为至少3部分。 const ALL_CITY_LIST = DATA_JSON.allCityList; const HOT_CITY_LIST = DATA_JSON.hotCityList; const LAST_VISIT_CITY_LIST = DATA_JSON.lastVisitCityList;而要实现字...
本文介绍了ReactNative页面跳转Navigator，分享给大家。具体如下： Navigator即导航器，通过导航器我们可以实现应用在不同的页面之间进行跳转。 导航器会建立一个路由栈，用来弹出，推入或者替换路由状态。该路由栈相当于Android原生中使用的任务栈。 renderScene 该方法就相当于我们使用的startActivity方法了，我们可以在该方法中设置需要渲染的场景（跳转的页面），该方法接收两个参数（必要参数），route和navigator，其中rout...
本文介绍了react-native ListView下拉刷新上拉加载实现。分享给大家，具体如下：先看效果图下拉刷新React Native提供了一个组件可以实现下拉刷新方法RefreshControl 使用方法 <ListViewrefreshControl={<RefreshControlrefreshing={this.state.refreshing}onRefresh={this._onRefresh.bind(this)}/>}//... </ListView>在视图加载的时候的时候，将refreshing设置为true，数据加载完成设置为false即可 上拉加载利用ListView里的onEnd...
基于webpack 2.3的标准语法，包含了less变量替换、React组件热加载、第三库单独输出、区分生产与开发环境等常用配置。 use strictmodule.exports = function( env ) {// 生成环境下webpack使用-p参数开启代码压缩// webpack[-dev-server]使用--env dev参数指定编译环境var isDev = env == dev;var path = require( path );var webpack = require( webpack );var CleanWebpackPlugin = require( clean-webpack-plugin );var CopyWeb...
由于最近刚开始认真的搞RN，可能有一些封装的不是最佳实践，还是希望大家多提意见，和大家一起进步吧。本文介绍了ReactNative短信验证码倒计时控件，分享给大家功能 根据项目的需要，需要写一个自定义的控件，实现如下功能： 默认文字为点击获取验证码点击后出现60秒的倒计时颜色，字号可调倒计时过程中，再次点击需要忽略掉倒计时完成后文本恢复成点击获取验证码再几次点击同之前其实说了这么多，就是个最普通的验证码的功能。。。...
本文介绍了React Native实现进度条弹框，分享给大家我们在上传或者下载文件时候，希望有一个进度条弹框去提醒用户取当前正在上传或者下载，也允许用去取点击取消上传或者下载。 首先实现进度条。 import React, {PureComponent } from react; import {StyleSheet,View,Animated,Easing, } from react-native;class Bar extends PureComponent {constructor(props) {super(props);this.progress = new Animated.Value(this.props.in...
最近在学习ReactNative，ReactNative可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App，今天就学习一下ReactNative实现图片上传功能在查看ReactNative的官方文档的时候，你会发现其实Fackbook是没有提供图片上传功能的。如果我们的项目里需要使用图片上传（用js 实现图片上传），那我们有没有什么办法呢？通过搜索React-native的github， 会发现里面有这么一篇文章：https://github.com/facebook/react-nativ...
最近学习浅尝则止的学习了一下react.js这个UI的框架，react这个库给我的最大的感觉就是它能够完全的接管UI层，在要改变视图的东西的时候只需要改变其this.state中的状态。只要操作数据层的东西视图层就会发生变化，这一点我还是很喜欢的。可以摆脱对DOM的直接操作，毕竟直接来会比较复杂，本来应该是逻辑层js中混杂着各种css的字符串，对于我来说有点不爽（JSX中也混杂这标签，但我觉的不应该把它看作标签，看作语句会习惯一点）。...