上篇我们说到过在react-native触摸及手势事件 那么我在项目中遇到的问题是在react-navigation中的子页面,希望保留在ios中的效果:从左侧往右侧滑动为退出该页面. 但是希望我在滑动页面的某一部分(视频区域)的时候,不要做出退出页面的操作,页面如下 在手势操作上面红色部分的时候,取消导航的手势返回,在拖动下方区域的时候,启用导航的手势返回 其实在react-navigation组件中,返回的返回手势是要求成为响应者的,我们不能修改react-navigation的默认机制.…

基于React Native的Material Design风格的组件库.(为了平台统一体验,目前只打算支持安卓) 官方网站 http://mrn.js.org/ Github https://github.com/binggg/mrn 示例应用在线演示 https://appetize.io/app/j48zj9r83cetpd1mhg4g8buc4w 示例应用下载 https://github.com/binggg/MaterialReactNative/blob/master/androi…

React Native 好用的时间线 组件 效果如下: 实现方法: 一.组件封装 CustomTimeLine.js "use strict"; import React, {Component} from "react"; import { StyleSheet, ListView, Image, View, Text, TouchableOpacity } from "react-native"; const ds = new ListVi…

本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错.笔者目前公司是采用 APICloud 进行移动应用开发(人少 + 应用要求低),不过确实也有很多的性能瓶颈:今天笔者还特地邮件问了 Expo Support 有关添加微信.百度地图等成为官方预置库的计划,得到的回复是可能两三个月内会先将微信集成进来,很期待未来 Expo 在国内的发展. 利用 Create React Native App 快速创建 R…

之前我们学习了从零学React Native之11 TextInput了解了TextInput相关的属性. 在开发中,我们有时候有这样的需求, 希望输入区域的高度随着输入内容的长度而增长, 如下: 这时候我们需要自定义一个组件: 在项目中创建AutoExpandingTextInput.js import React, {Component} from 'react'; import {AppRegistry, TextInput, StyleSheet} from 'react-native'…

此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法,此小节主要介绍 React 的底层原理与机制. 目前 React 可以说是前端世界最火热的框架,具有高性能以及容易上手的特性,而且在掌握了 React 框架后,再学习其他类似 React 的框架也将变得更易上手. 关于 React 框架的高性能原因以及底层的重要概念,我们在后续的章节会陆续展开探讨,这一章节我们先来通过一个实际的案例来探究…

###React简介 RN是基于React设计,了解React有助于我们开发RN应用: React希望将功能分解化,让开发变得像搭积木一样,快速而且可维护 React主要有如下3个特点: *作为UI(Just the UI) *虚拟DOM(Virtual DOM) 这是亮点  是React最重要的一个特性  放进内存   最小更新的视图 差异部分更新 diff算法 *数据流(Date Flow)单向数据流 学习React需要掌握哪些知识? *JSX语法   类似XML *ES6相关知识 *前端基…

Stateless component也叫无状态组件.有三种方法可以创建无状态组件. 坑 一般一个组件是怎么定义的: 很久以前的方法: const Heading = createClass({ render() { return <Text>{this.props.title}</Text> } }) 后来有了ES6 class Heading extends Component { render() { return <Text>{this.props.title}…

注释:swiper组件是第三方组件 所以在使用之前应该先在命令行安装,然后将第三方的模块引入(第三方模块地址:https://github.com/leecade/react-native-swiper) 1.$ npm i react-native-swiper --save 2.$ npm i react-native -g 安装完成后,我们需要完成轮播功能.因为可以到github看看swiper暴露的接口和参数.github地址是:https://github.com/leecade/re…

运用在React 中 setState的对象.数组的操作时是不能用类似array.push()等方法,因为push没有返回值,setState后会出现state变成Number,为了方便他人和自己查看,因此写个数组和对象的操作方法小笔记. 1.修改object中某项 this.setState({ object: {...object, key: value} }); 2.删除数组首位 array.splice(, ); this.setState({ array }); 3.删除数组尾部 ar…