1. Live Reload和Hot Reloading的区别: 相同点:都是你只要保存一下原文件,那么App就会实时刷新. 区别:Live Reload是全局刷新,而Hot Reloading是局部刷新. 2. 有时候我们修改了代码,在手机上并不会实时更新代码. 解决的办法就是打开文件(是下面2个路径中的一个): app_name\node_modules\react-native\packager\react-packager\src\node-haste\FileWatcher\index…

一.关于react native 版本的升级 参照文档:http://reactnative.cn/docs/0.45/upgrading.html react-native -v   查看当前版本 二.关于react native 的生命周期 http://www.jianshu.com/p/986bcbcd02aa componentWillMount 中state的值改变,不会引发render的再次渲染.如果componentDidMount中改变state值,会引发render的再次渲染…

本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865  欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! 关于React Native各种疑难杂症,问题深坑总结方案请点击查看: Mac和Windows安装搭建React Native环境教程如下: Mac OS X版本:Mac OS X安装R…

(六).React Native开源项目: 1.Pober Wong_17童鞋为gank.io做的纯React Native项目,开源地址:https://github.com/Bob1993/React-Native-Gank 2.聂风童鞋做的<都看影视>React Native项目,开源地址:https://github.com/changfuguo/doukanmv 3.大大做的<新闻阅读Reading>React Native项目,项目地址:http://www.lcode…

最近闲来无事,学习了React Native开发Android APP,自我感觉RN APP的效果和Native APP比还是蛮不错,以下是找到的一些优秀源码,仅供学习参考... React Native开源项目 1.Pober Wong_17童鞋为gank.io做的纯React Native项目,开源地址:https://github.com/Bob1993/React-Native-Gank2.聂风童鞋做的<都看影视>React Native项目,开源地址:https://github.c…

1.TextInput组件对安卓的适配问题 textInput 在iOS 显示正常,但是在android下会出现下横线,并且字会被遮盖 因此一般都这么用该组件 <TextInput style={{paddingVertical:0}} underlineColorAndroid="transparent" /> 2.关于样式 附react native可使用的样式属性: https://github.com/doyoe/react-native-stylesheet-gu…

闲暇之余,写了一个React Native的demo,可以作为大家的入门学习参考. GitHub:https://github.com/xujianfu/ElmApp.git GitHub:https://github.com/xujianfu/React-Native-CarProject.git 项目截图如下: 一.项目界面设计 1.React Navigation的应用  React Navigation 源于 React Native 社区对一个可扩展且易于使用的导航解决方案的需求,它完…

1.关于React Native导出组件的export default和export的问题: 一个文件只能有一个export default,可以有多个export export class Template{} export class AnotherTemplate{} 文件的引用: import {Template,AnotherTemplate} from './components/Templates'; 使用export default的引入: import Template fro…

前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所偏差,在学习中如果有错会及时修改内容,也欢迎万能的朋友们批评指出,谢谢 文章第一版出自简书,如果出现图片或页面显示问题,烦请转至 简书 查看 也希望喜欢的朋友可以点赞,谢谢 React Native 组件执行顺序介绍 所有的程序都有生命周期,这是开发人员关注的点,比如iOS中有一个 ViewDidL…

React Native 没有像web那样可以给元素绑定click事件,前面我们已经知道Text组件有onPress事件,为了给其他组件 也绑定点击事件,React Native提供了3个组件来做这件事. 1.TouchableHighlight:高亮触摸,用户点击时,会产生高亮效果. 2.TouchableOpacity:透明触摸.用户点击时,点击的组件会出现透明效果. 3.TouchableWithoutFeedback:无反馈性触摸.用户点击时无任何视觉效果. 注意:只支持一个子节点,如果…

Text用于显示文本的React组件,并且它也支持嵌套.样式,以及触摸处理.在下面的例子里,嵌套的标题和正文文字会继承来自styles.baseText的fontFamily字体样式,不过标题上还附加了它自己额外的样式.标题和文本会在顶部依次堆叠,并且被代码中内嵌的换行符分隔开. 一:属性 1:allowFontScaling bool(iOS特有):控制字体是否要根据iOS的“文本大小”辅助选项来进行缩放. 2:numberOfLines number :用来当文本过长的时候裁剪文本.包括折叠…

一:理论知识点 1:什么是FlexBox布局? 弹性盒模型(The Flexible Box Module),又叫Flexbox,意为“弹性布局”,旨在通过弹性的方式来对齐和分布容器中内容的空间,使其能适应不同屏幕,为盒装模型提供最大的灵活性. Flex布局主要思想是:让容器有能力让其子项目能够改变其宽度.高度(甚至是顺序),以最佳方式填充可用空间: 2:Flex布局基于flex-flow流 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis).主轴的开始位…

第一节 搭建开发环境 第二节 显示页面标题 第三节 实现页面布局 # React native是什么? React Native,是颠覆性的移动开发技术.它使用js开发,又是原生应用,不同于Hybrid. 简单的理解:它提供一个原生项目,然后规定js与原生项目的接口,编译原生项目,打包程序员编写的js, 共同形成一个完整的应用. 原生项目起引导作用,程序员完全可以不修改甚至不看原生代码,就能正常完成ios和android的编程. 对于前端程序员,这是显而易见的利好,由于是原生程序,性能较Web…

上一篇 react-native文章提到了TextInput组件对安卓的适配问题,因此对该组件进行封装很有必要. 文章地址  react native定报预披项目知识点总结 TextInput介绍 官网地址: https://facebook.github.io/react-native/docs/textinput 附加中文网地址:https://reactnative.cn/docs/textinput/ TextInput是一个允许用户在应用中通过键盘输入文本的基本组件.本组件的属性提供了…

WEB通知和React Native之即时通讯(iOS Android) 一,需求分析 1.1,允许服务器主动发送信息给客户端,客户端能监听到并且能接收. 1.2,为了方便同一个系统内的用户可以指定某个用户可以私聊. 1.3,给指定用户或多个用户发送通知. 二,技术介绍 2.1.WebSocket介绍 1,WebSocket 是什么? WebSocket 是一种网络通信协议.RFC6455 定义了它的通信标准. WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通…

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

此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法. 1. 软件开发语言与框架的学习本质 我们在开始系列文章的技术点内容前,花一点时间探讨一下软件开发语言以及框架的学习本质,相对于整个技术点的讲解,花这一点一起思考的时间是值得的. 相信看此系列文章的朋友都已有了非常多的软件开发经验,而当我们回顾语言与框架的学习过程时,所有语言的基础语法都大同小异,无非基础数据类型.条件判断.分支判断.循环…

此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 API 的介绍与代码实战,以及 React Native 与 iOS.Android 平台的混合开发底层原理讲解与代码实战演示,精选了大量实例代码,方便读者快速学习. 书籍还配套了视频教程「80 节实战课精通 React Native 开发」,此视频课程建议配合书籍学习,书籍中原理性的东西讲解的比较清晰,而…

此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 API 的介绍与代码实战,以及 React Native 与 iOS.Android 平台的混合开发底层原理讲解与代码实战演示,精选了大量实例代码,方便读者快速学习. 书籍还配套了视频教程「80 节实战课精通 React Native 开发」,此视频课程建议配合书籍学习,书籍中原理性的东西讲解的比较清晰,而…

这是我技术公众号的第一篇文章,也是React Native系列文章的第一篇,对我的文章感兴趣的可以加我微信16230091进行关注. 本文表面上讲React Native(以下简称RN),实际上对于学习任何语言和系统都适用. 对于新技术的学习,分为两种,一种是语言,类似Swift.Objective-C.Java.ES6,另一种是系统,比如Android.iOS.前端. 1. 语言层面,如果你精通某一门语言,那么是可以很快切换到另一门语言的.这就是语言的相通性.翻开市面上那些21天精通某某语言之…

Ref: React Native跨平台移动应用开发 后记:这本书博客味有点浓. 本篇涉及新建工程的若干套路,以及一点语法知识. 创建新工程 (1) 解决的一大核心问题: (2) 使用Javascript的严格模式. (3) Ubuntu14.14 React Native 环境搭建 开发环境配置: ubuntu下折腾ReactNative https://gist.github.com/platonish/f913e8a691ae811524f47bfb7710437b 亲测,可用,开始创建工…

建议先下载好资料后,再阅读本文.demo代码和资料下载 目录 一.前言 二.回答一些问题 1.为什么写此教程 2.本文适合哪些人看 3.如何使用本教程 4.需要先学习JavaScript.HTML.CSS么 5.如何编写demo 6.保不保证学习效果 三.第一阶段<相识>(预计用时:9.5~14.5天) 1.内容简介 2.环境搭建(预计用时:1~2天) 3.Hello World(预计用时:0.5天) 4.了解 index.android/ios.js 5.Flex布局(预计用时:2~3天)…

相关文章 React Native探索系列 React Native组件系列 前言 了解了RN的组件的生命周期后,我们接着来学习RN的具体的组件.View组件是最基本的组件,也是首先要掌握的组件,这一篇我们来学习View组件. 1.概述 View组件是RN中最基本的组件,绝大部分的组件都继承了View组件的属性,所以学习其他组件前,要首先掌握View组件. View组件是一个支持Flexbox布局.样式.一些触摸处理的容器,它可以放到其它的组件里,也可以有任意多个任意类型的子组件.View组件对…

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50525976 本文出自:[江清清的博客] (一)前言 [好消息]个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏:http://www.lcode.org 前几节课程我们对于React Native的一些基础配置,开发工具以及调试,Android项目移植做了相关讲解,今天一起来学习一下另外一个比较重要的知识点,就是React Nativ…

),React Native技术交流4群(458982758),请不要反复加群!欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! 在React Native中React事实上很多其它关注的是视图View层.所以React Native本身也支持而且能够让我们非常easy方便的移植一个Android原生的项目到React Native中. (二)前提准备工作 ①.首先我们有一个採用Gradle构建的Android应用…

第一次在segmentfault写博客,很紧张~~~公司项目上ReactNative,之前也是没有接触过,所以也是一边学习一边做项目了,最近腾出手来更新总结了一下RN的Debug的一个小知识点,不是说怎么去Debug,而是Debug的代码原理,下面开始正文. Debug过程涉及到三个对象,一个是App(Android或iOS),一个是Server,另外一个就是浏览器(Chrome或FireFox或其他).Server是App和浏览器之间通信的桥梁,比如App发Http请求给Server,Serv…

初学React Native,如果没有人指引,会发现好多东西无从下手,但当有人指引后,会发现其实很简单.这也是本人写这篇博客的主要原因,希望能帮到初学者. 本文不会介绍如何搭建开发环境,如果你还没有搭建,可参考这里的官方文档:https://react-native.org/doc/getting-started.html . 本文也不会介绍各种组件,太多了,可参考这里的官方文档:https://react-native.org/doc/components-and-apis.html . 本文…

前言 React Native 作为一款跨端框架,有一个最让人头疼的问题,那就是版本更新.尤其是遇到大版本更新,JavaScript.iOS 和 Android 三端的配置构建文件都有非常大的变动,有时候三者的配置文件又互相耦合在一起,往往牵一发而动全身. 本文假定 React Native 升级的主导者是前端同学,比较熟悉 javaScript 为主的一套前端构建流程.如果有条件,升级时强烈建议拉上 iOS 和 Android 开发,对于一些琐碎的升级细节,当面沟通远比搜索引擎高效. " 提示…

因为工作需要,需要进一步了解移动端的开发,遂返回复习移动端的知识点,在开始学习之前,产生了疑惑WEB APP .Native APP .Hybrid APP.React Native.Uniapp.H5这些东西到底是什么?感觉是那么熟悉,单词拆分开每一个都认识,但是合在一起就完全不知道什么意思了,遂自行百度查询,自己解自己的惑吧. 个人博客,理解不具权威性. 一.WEB APP 通俗的理解,WEB APP 即为使用HTML.CSS.JS三大前端基础进行开发的WEB APP,是基于浏览器进行运行使…

前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所偏差,在学习中如果有错会及时修改内容,也欢迎万能的朋友们批评指出,谢谢 文章第一版出自简书,如果出现图片或页面显示问题,烦请转至 简书 查看 也希望喜欢的朋友可以点赞,谢谢 Text 组件介绍 在 React Native 用于显示文本的组件就是 Text,和iOS中的 UIlabel,Androi…