在上一篇文章中,我们学会了如何搭建React Native的环境(React Native入门教程(笔记) 1 – 开发环境搭建),不知道你们是否搭建好了呢,如果还没有,那么快动起小手,来体验RN带给我们的乐趣. 欢迎加入React Native讨论群:120663591 由于我也没怎么接触过js和css,所以就用自己的方式来学习,所以文章中有错误在所难免,如果您发现了错误,请及时在文章底下评论.我个人比较合适的学习方式是直接开发,遇到什么不会就去查,先把大概怎么写混熟,等到可以熟练写出程序之后…

上一篇文章中介绍了基本组件的使用 React Native入门教程(笔记) 2 – 基本组件使用及样式 本节内容将继续沿用facebook官方例子介绍如何使用Flexbox布局把界面设计的多样化. 转载请注明出处:http://blog.csdn.net/wingichoy/article/details/51811866 Flexbox Flex布局意思为弹性布局,他使用起来非常的方便. 他主要有以下几种属性 flexDirection //设置主轴方向 flexWrap //设置是否换行 j…

有人问我为啥很久不更新博客..我只能说在学校宿舍真的没有学习的环境..基本上在宿舍里面很颓废..不过要毕业找工作了,我要渐渐把这个心态调整过来,就从react-native第一篇博客开始.话说RN也出来很久了 每次我研究都比别人晚一步 不过没关系,意识到了就不算晚.环境搭建了几个小时,中间很正常的遇到了一些错误,于是记录下来过程和问题的解决方法,分享给大家. 转载请注明出处:http://blog.csdn.net/wingichoy/article/details/51791076 为什么要研…

中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看看阮一峰老师的<ECMAScript 6 入门>这篇文章.里面涉及很多 ES6 的新特性.我之前也是看了阮老师的文章做了一些学习笔记 ES6 学习笔记. 1.环境搭建 环境搭建中文教程,点击跳转RN中文社区 :http://reactnative.cn/docs/0.40/getting-star…

基于Nodejs生态圈的TypeScript+React开发入门教程   概述 本教程旨在为基于Nodejs npm生态圈的前端程序开发提供入门讲解. Nodejs是什么 Nodejs是一个高性能JavaScript脚本运行环境,内部基于Chrome V8脚本引擎.它相当于把在浏览器中执行JavaScript脚本的功能抽取出来,作为一个单独的程序,可在桌面端命令行等环境中使用. NPM是什么 NPM是nodejs包管理器(nodejs package manager),目前已为全球最大的开源脚本…

React Native入门(一)环境搭建与Hello World React Native入门(二)Atom+Nuclide安装.配置与调试 React Native入门(三)组件的Props(属性)和State(状态)…

  前  言 毫无疑问,react是目前最最热门的框架(没有之一),了解并学习使用React,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发效率高.React当然集成了这两大优点. 这要归功于React的两大特点,也是该框架一直强调的优势: 1.虚拟dom与dom diff:在React中,一切的更新都是先更新虚拟dom,再根据react自带的dom diff 算法,进行对比计算,在实际dom中实现最小粒度的更新,这就是React性能优…

http://blog.csdn.net/xiaominghimi/article/details/51586492 一用到跨平台的引擎必然要有引擎与各平台原生进行交互通信的需要.那么Himi先讲解React Native与iOS之间的通信交互. 本篇主要分为两部分讲解:(关于其中讲解的OC语法等不介绍,不懂的请自行学习) 1. React Native 访问iOS 2. iOS访问React Native     一:React Native 访问iOS 1. 我们想要JS调用OC函数,就要实…

前  言 毫无疑问,react是目前最最热门的框架(没有之一),了解并学习使用React,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发效率高.React当然集成了这两大优点. 这要归功于React的两大特点,也是该框架一直强调的优势: 1.虚拟dom与dom diff:在React中,一切的更新都是先更新虚拟dom,再根据react自带的dom diff 算法,进行对比计算,在实际dom中实现最小粒度的更新,这就是React性能优秀的…

React Native之本地文件系统访问组件react-native-fs的介绍与使用 一,需求分析 1,需要将图片保存到本地相册: 2,需要创建文件,并对其进行读写 删除操作. 二,简单介绍 react-native-fs支持以下功能(ios android): 将文本写入本地 txt 读取txt文件内容 在已有的txt上添加新的文本 删除文件 下载文件(图片.文件.视频.音频) 上传文件 only iOS 三,使用实例 3.1 将文本写入本地 txt let rnfsPath = Plat…

有了一些对React Native开发的简单了解,让我们从实战出发.一起来构建一个简单的京东client. 这个client是仿照之前版本号的京东client开发的Android版应用,来源于CSDN上的一位分享者,再次向他表示感谢! 本文会对京东client首页的布局进行简单的分析,并对搜索框部分的开发进行介绍,其它内容在后面的文章中继续介绍. 后继文章: React Native入门--布局实践:开发京东client首页(二)TabBar的构建 欢迎交流. 1.京东client首页布局分析…

上周末开始接触react native,版本为0.37,边学边看写了个demo,语法使用es6/7和jsx.准备分享一下这个过程.之前没有native开发和react的使用经验,不对之处烦请指出.希望对在web开发有一定基础,想涉及app开发的同学有帮助,共同进步. 一.环境安装 首先是开发环境安装,我是在win7/8 64位环境下安装的安卓环境.模拟器用的是android studio自带模拟器(android emulator),安卓API 24(7.0),因为我没有mac -.-.文中组件…

抛砖引玉(帮你更好的去理解怎么产生的 能做什么) 砖一.动态配置 由于 AppStore 审核周期的限制,如何动态的更改 app 成为了永恒的话题.无论采用何种方式,我们的流程总是可以归结为以下三部曲:“从 Server 获取配置 –> 解析 –> 执行native代码”. 很多时候,我们自觉或者不自觉的利用 JSON 文件实现动态配置的效果,它的核心流程是: 通过 HTTP 请求获取 JSON 格式的配置文件. 配置文件中标记了每一个元素的属性,比如位置,颜色,图片 URL 等. 解析完 J…

转载自:http://www.jianshu.com/p/b88944250b25 前言 React Native 诞生于 2015 年,名副其实的富二代,主要使命是为父出征,与 Apple 和 Google 抗衡,为开发者带去一套跨平台.动态更新的 Javascript 框架,口号是:Learn once, write anywhere:Build mobile apps with React.在试图推翻 Android 和 iOS 压制的同时,还提携了一把自家兄弟:React. 从诞生之日…

现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略ReactJS的风采吧~~ 章有点长,耐心读完,你会有很大收获哦~ 一.ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用…

ReactNative介绍 它的底层引擎是JavaScript Core,调用的是原生组件而非HTML5组件(HTML+CSS+JavaScript构建的组件).运行时,可以做到与Native App媲美的体验,同时因为JavaScript代码可以使用后端强大的Web方式管理,既可以做到高效开发,也可以做到快速部署和问题热修复.React Native APP运行在客户的手机上,而控制端可以在后端,可以充分发挥Web的能力,就像一个牵线木偶,任凭你表演. 环境搭建 安装Node.js最新版本 h…

这次我们来填React Native生命周期的坑.这一点非常重要,需要有一个清晰的认识.如果你了解Android或者iOS的话,你会非常熟悉我们今天要说的的内容. 基本上一个React Native的组件会经历三个阶段最终渲染在界面上,他们分别是:开始渲染.更新.卸载. 开始渲染: componentWillMount componentWillMount(): void 组件开始渲染的时候调用这个方法 componentDidMount componentDidMount(): void 组件…

掌握了React Native的组件就可以使用IOS的原生组件和API. 一 View组件 就像开发web应用程序中,需要使用很多的HTML标签.例如 div,form.但是在基于DIV+CSS布局的web开发中,最为重要的元素就是 . DIV是页面布局的基础,是作为容器元素存在的.在React Native中,类似于HTML的DIV的组件就是 View组件. 1 View组件介绍 作为创建UI时最基础的组件,View是一个支持Flexbox布局.样式.一些触摸处理.和一些无障碍功能的容器,并且…

本文示例参考自<React Native第一课> React Native官方文档中文版(含最新Android内容) 这里只大概记录下我的操作步骤和遇到的问题,一定要牢记下面这条: 如果你在Mac下遇到提示写入权限时,记得在命令前加上sudo     安装开发所需要的环境,参考这里>>   我所遇到的几个问题: 1) 安装brew curl -LsSf http://github.com/mxcl/homebrew/tarball/master | sudo tar xvz -C/…

前言 本系列是基于React Native版本号0.44.3写的.很多的App都使用了Tab标签组件,例如QQ,微信等等,就是切换不同的选项,显示不同的内容.那么这篇文章将介绍RN中的Tab标签组件. Tab标签 什么是Tab标签?(ps:我是这样叫的),就拿微信来说吧,底部有4个选项卡,点击不同的按钮切换不同的内容. 在RN中有两个组件负责实现这样的效果,它们是: TabBarIOS TabNavigator TabBarIOS 和NavigatorIOS相似,看名字就知道该组件只适用于iOS…

学rn得朋友们,你们知道rn开源项目吗?来吧看这里:http://www.marno.cn/(rn开源项目) React Native学习之路(9) - 注册登录验证的实现 + (用Fetch实现post请求) + (倒计时验证码)+(父子组件通信)+(asyncStorage异步存储) +(TextInput文本输入框):http://www.jianshu.com/p/7c81e122276b ReactNative学习笔记七之图表组件交互(上):http://www.jianshu.com…

一.Homebrew 是OS X 的套件管理器. 首先我们需要获取 Homebrew ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 1.我们可以先通过在终端输入: brew -v 如果没有安装就输入Homebrew的镜像路径去下载 2.拥有了brew,就可以通过它去下载一些依赖了,比如node,我们可以在终端输入:brew install node,如果…

),React Native技术交流4群(458982758).请不要反复加群!欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! ListView组件是React Native中一个比較核心的组件,用途很的广.该组件设计用来高效的展示垂直滚动的数据列表.最简单的API就是创建一个ListView.DataSource对象.同一时候给该对象传入一个简单的数据集合.而且使用数据源(data source)实例化一个Li…

这里讲一下React Native中的一个组件——ActivityIndicator,这是一个加载指示器,俗称菊花,很常见的,效果如下所示: 可以看到图中有两个加载指示器,一大一小,这是尺寸不是我设置的,这个组件本身就有一个属性是设置其大小的,两个选项,一大一小.这里顺便就介绍一些该组件的属性: animating:这个参数接受布尔型的值,表示是否显示加载指示器. color:string型参数,用来设置指示器的颜色,默认是灰色的,我们一般也不管他. hidesWhenStopped(仅iOS可…

),React Native技术交流4群(458982758),欢迎各位大牛,React Native技术爱好者增加交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! Image是一个现实多种不同类型图片的React组件,能够进行载入网络图片,本地资源图片,打包的APP中的图片资源,以及磁盘比如:相冊中的图片. (二)Image基本使用方法 2.1.载入项目资源图片 从0.14版本号開始react native支持载入我们项目目录中的图片资源.我如今在測试项目中创建一…

React Native 英文官网:https://facebook.github.io/react-native/ React Native 中文官网:http://reactnative.cn/ React Native 官方安装教程:http://reactnative.cn/docs/0.27/getting-started.html#content 0x00 Dependencies for Windows + Android 所需准备: a.Chocolatey b.node.js…

),React Native技术交流4群(458982758)种 enabled  bool   android平台适用   用来设置下拉刷新功能是否可用 progressBackgroundColor ColorPropType  设置载入进度指示器的背景颜色 size RefreshLayoutConsts.SIZE.DEFAULT  android平台适用  载入进度指示器的尺寸大小 ,详细能够查看RefreshControl.SIZE(详细点击进入) tintColor ColorPro…

关于React Native的开发,当中一个问题是缺少好用的IDE,有些人说不就是JS么,搞一个记事本也就写了,那样尽管牛逼,但事实上还是非常头大的,有一款好的IDE还是能提升开发效率的,这里对几个还算能用的IDE进行比較.大家能够选择自己喜欢的IDE用于RN应用的开发. 1.Facebook推荐IDE--基于Atom的nuclide nuclide是Facebook在开源React Native框架时同一时候开源的所谓官网的IDE,实际上是基于Github公布的开源编辑器Atom开发的Reac…

1. 首先创建一个目录(比如ReactNativeDir),用于存放各个ReactNative工程的代码 2.使用React Native命令工具来创建(初始化)一个ReactNative项目(test): react-native init test 使用Atom打开test项目,可以看到有 如下几个重要目录/文件: 目录/文件 说明 __test__  单元测试文件夹 android  原生Android工程文件夹 ios  原生IOS工程文件夹 node_modules  依赖的第三方库目…

Create React Native App 是开始构建新的React Native应用程序的最简单方法.它允许您启动项目而无需安装或配置任何工具来构建本机代码 - 无需安装Xcode或Android Studio. 先安装Node.Js,则可以使用npm来安装create-react-native-app命令行实用程序: (NPM的全称是Node Package Manager,是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准), npm install -…