在上篇中,笔者分享了部分安装并调试React Native应用过程里的一点经验,如果还没有看过的同学请点击<React Native基础&入门教程:调试React Native应用的一小步>. 在本篇里,让我们一起来了解一下,什么是Flexbox布局,以及如何使用. 一.长度的单位 在开始任何布局之前,让我们来首先需要知道,在写React Native组件样式时,长度的不带单位的,它表示“与设备像素密度无关的逻辑像素点”. 这个怎么理解呢? 我们知道,屏幕上一个发光的最小点,对应着一个…

react native基础与入门 一.react native 的优点 1.跨平台(一才两用) 2.低投入高回报 (开发成本低.代码复用率高) 3.性能高:拥有独立的js渲染引擎,比传统的h5+ webview高效 4.支持动态更新(无需每次更新上传到应用市场和审核) 二.使用react native开始项目 1.安装脚手架 npm install -g react-native-cli 2.初始化项目结构 react-native init projectName 3.window下安卓环境…

React Native(以下简称RN)为传统前端开发者打开了一扇新的大门.其中,使用浏览器的调试工具去Debug移动端的代码,无疑是最吸引开发人员的特性之一. 试想一下,当你在手机屏幕按下一个按钮,处理事件的代码就可以立即在浏览器的调试工具里进行断点调试,而且每当你对代码进行修改,界面便可以完成快速地重载,省去昂长的编译时间,这会是多么提高工作效率. 传统的Web前端开发人员自然很熟悉浏览器的调试工具,但是对于如何将其在RN中使用以便和移动端结合起来,也许会相当陌生.这也成为了一些开发者跨入R…

今天学习react native,需使用expo在移动端进行调试. npm start 运行项目后,使用expo扫描二维码,始终没有反应.于是决定采用这个方法: 连上手机打开usb调试后,按下‘a’,等了一会,界面提示: something went wrong network. response timed out. 仔细一看,觉得可能ip有问题,查看电脑的ipconfig,发现该ip是一个VMware虚拟卡的ip,后将该虚拟卡禁用,重新打开项目,终于连接成功.…

休息了两天,状态恢复了一下,补充点基础知识. 二叉搜索树 搜索树数据结构支持许多动态集合操作,包括Search,minimum,maximum,predecessor(前驱),successor(后继),INSERT和DELETE等.因此我们使用一颗搜索树既可以作为一个字典又可以作为一个优先队列.且二叉搜索树上的基本操作所花费的时间与这棵树的高度成正比.二叉搜索树有两个很重要的变体,红黑树与B树,这个我们之后有机会再补一篇文章. 顾名思义,一棵二叉搜索树是以一棵二叉树来组织的.如图所示,这样的一…

跨平台框架 什么是跨平台框架? 这里的多个平台一般是指 iOS 和 Android . 为什么需要跨平台框架? 目前,移动开发技术主要分为原生开发和跨平台开发两种.其中,原生应用是指在某个特定的移动平台上,使用平台所支持的开发工具和语言,直接调用系统提供的 API 所开发的应用. 其优势体现在: 可以快速访问本平台的全部功能,比如摄像头. GPS 等: 原生应用的速度快.性能高,而且可以实现比较复杂的动画和绘制效果,用户体验较好. 缺点也很明显,主要体现在: 开发成本较高,不同的平台必须维护不同…

正文 概述:开发RN的工具有很多,选择性也比较多,比如Facebook专门为React开发的IDE:Nuclide,还有做前端比较熟悉的WebStorm.Sublime Text 3.VS Code等. 面对这些IDE我们应该怎么选择的呢? 不推荐的工具: Top1: Nuclide虽然是Facebook专门为React开发的,但依托于Atom的Nuclide真是慢的出奇,性能低到无法让人忍受. Top2: WebStorm这个工具对于我来说是非常熟悉的IDE从几年前开始开发NodeJs一来一直…

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…

前言:这一篇随笔将记录我在React-Native官网文档上学习的基础知识…

一 Model连表关系 一对多:models.ForeignKey(其他表)    多对多:models.ManyToManyField(其他表)    一对一:models.OneToOneField(其他表)    一般在数据库中创建外键关联时,就有一对多或者多对多,而一对一是Django独有的. 应用场景:    一对多:当一张表中创建一行数据时,有一个单选的下拉框(下拉框中内容,可被重复选择)    例如:创建用户信息时,需要选择一个用户类型:普通用户.金牌用户.铂金用户等.      …

本文由葡萄城技术团队于博客园原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 在上篇中,我们介绍了什么是Flexbox布局,以及如何使用Flexbox布局.还没有看过的小伙伴欢迎回到文章列表点击查看之前的文章了解. 那么,当我们有了基本的布局概念之后,就可以做一些有意思的尝试了.不过,它们会有一个美中不足:只是静静地呆在那里,不接受反馈.换句话说,它们从应用开始到结束,只有一种状态. 注意,上面这句话其实包含了RN中(当然同时也是React中…

学习地址:https://github.com/vczero/react-native-lesson 当我们初始化一个RN项目的时候主要的是index.ios.js文件和index.android.js文件 然后还包括和一些依赖(什么是依赖?就比如说你使用jquery就要下载这个jquery.js一样,这个被称为依赖)和原生的ios项目工程文件夹和原生的的Android原生文件夹,当然我们的编辑在index.ios.js(Android)等(一般情况下不需要动原生的项目工程).ok!下面我们开始…

Bug如下图所示: iOS显示正常,而安卓出现图片被挤压上去. 最后的解决方法: 比如你的 图片 是 750 x 513 那么 你设置样式的时候 width 为 屏幕的宽 ,高度为 屏幕的 宽 / (750 /513)这样就保留了原图的宽高比. var styles = StyleSheet.create({ // 这里是拿不到图片的个数的,需要使用内联样式即可 // contentContainer: { // width: Util.size.width, // height: Util.s…

前言 ArrayList 在开发中用到的频率很高,其中原生态提供的方法有一些很好用的重载版本,其中有的坑该跳得跳啊. 一.ArrayList的6种初始化方法1.构造方法 参数为空2.构造方法 参数为List3.构造方法 参数为int4.使用Arrays.asList(Obj);5.使用匿名内部类6.使用Collections.ncopies(通过复制参数)二.常规操作: 增删改查1.添加元素|集合,add有四个重载方法1) boolean add(E e)2) void add(int inde…

刚开始上手RN,碰到很多坑,记录一下.碰到问题多去看看github上面的issue! 启动命令react-native run-ios报错 1.:xcrun: error: unable to find utility "instruments", not a developer tool or in PATH 解决方案 sudo xcode-select -s /Applications/Xcode.app/Contents/Developer/ 重新跑一下就好了 2.bundlin…

import { Platform, } from 'react-native'; alert(JSON.stringify(Platform)): android手机弹出:{"OS":"android","Version":25,"is Testing":false} 我是android7.1的 如果是苹果OS则为iOS 所以可以用以下判断方式 if(Platform.OS==='android'){ //如果是androi…

1>Error:Configuration with name ‘default’ not found. 解决链接: http://blog.csdn.net/u011240877/article/details/51165799 2>Android Studio 报错总结: http://blog.csdn.net/zhouxin1233/article/details/51622102 3>required plugin “Android Support” is disabled:…

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

前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. PS:任何新技术的尝鲜都一定要控制在自己能控制的范围内,失败了会有可替换方案,不要引起不可逆的问题,这样会给团队造成灾难性的后果. 事实上,RN经过一段时间发展,已经有充分数量的人尝试过了,就我身边就有几批,褒贬也不一: ① 做UI快 ② 还是有很多限制,不如原生Native ③ 入门简单,能让前端快…

来自:https://github.com/ele828/react-native-guide React Native指南汇集了各类react-native学习资源.开源App和组件 React-Native学习指南 本指南汇集React-Native各类学习资源,给大家提供便利.指南正在不断的更新,大家有好的资源欢迎Pull Requests! 同时还有Awesome React Native系列https://github.com/jondot/awesome-react-native 目…

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

(二).基础入门: 1.React Native For Android环境配置以及第一个实例 2.React Native开发IDE安装及配置 3.React Native应用设备运行(Running)以及调试(Debugging) 4.React Native移植原生Android项目-已废弃 4.1.React Native移植原生Android项目-已更新版本-New 5.React Native进行签名打包成Apk 6.React Native库版本升级(Upgrading)与降级讲解…

React Native 官方文档中文版翻译 http://wiki.jikexueyuan.com/project/react-native/homepage.html REACT NATIVE开发书籍http://www.reactnative.com/books/ 整理了一份React-Native学习指南 自己在学习React-Native过程中整理的一份学习指南,包含 教程.开源app和资源网站等,还在不断更新中.欢迎pull requests! React-Native学习指南 本指…

<!----iOS> <!----Swift>*IOS开发常用社区:http://code4app.com/ *IOS开发常用社区:http://www.cocoachina.com/*IOS开发常用社区: http://www.oschina.net/*IOS开发常用社区:http://www.cnblogs.com/ *IOS开发常用社区:http://www.csdn.net/ *IOS开发常用社区:http://www.51cto.com/   *IOS开发常用社区:htt…

一个资深iOS开发者对于React Native的看法 当我第一次尝试ReactNative的时候,我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道.   我认为一个js开发者可以使用javascript来构建iPhone应用确实是一件很酷的事情,但是我很快放弃了自己去使用它的念头.毕竟我因为爱好而从事ios原生开发多年,并且目前为止已经很熟悉这一套开发专业工具. 我已经创造了一些我引以为傲的iOS应用--一些使用Object-C和Xcode构建的应用,通常人们都是这么做的.这两样工具是苹果…

当我第一次尝试ReactNative的时候,我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道. 我认为一个js开发者可以使用javascript来构建iPhone应用确实是一件很酷的事情,但是我很快放弃了自己去使用它的念头.毕竟我因为爱好而从事ios原生开发多年,并且目前为止已经很熟悉这一套开发专业工具. 我已经创造了一些我引以为傲的iOS应用——一些使用Object-C和Xcode构建的应用,通常人们都是这么做的.这两样工具是苹果公司提供的.用来开发iOS应用的,所以,我和其他的苹果开发者…

React Native 是一个 JavaScript 的框架,用来撰写实时的.可原生呈现 iOS 和 Android 的应用.其是基于 React的,而 React 是 Facebook 的用于构建用户界面的 JavaScript 库,但是这里不是给浏览器解释的,而是为移动平台.换句话说:如果你是一名 web 开发者,你可以使用熟悉的框架和单一的 JavaScript 代码库,即 React Native来撰写清晰的.高效的移动应用. 我们以前都听说过那些个通用的 app 开发,比如框架 Co…

React Native应用实现步骤 在整个应用设计中,始终按照自下而上的原则进行.在大型的项目中,自下而上的设计方式简单,可以并行工作,并且可以在构建的同时写测试用例. React Native设计大体为五个步骤. 一.应用原型 设计各界面的草图.从主界面开始,处理各种跳转的关系. 二.基础组件结构设计 原型设计完成后,需要设计每个界面的React Native基础组件的分层结构. 2.1 列出所有需要使用的基础组件 首先要做的是从UI界面上找出所有需要使用的基础组件.基础组件需要遵循“责任唯…

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

本文假设你已经有一定的React Native基础,并且想要了解React Native的JS和原生代码之间是如何交互的. React Native的工作线程 shadow queue:布局在这个线程工作 main thread:UIKit在这里工作 Javascript thread:Js代码在这里工作 另外每一个原生模块都有自己的一个工作GCD queue,除非你明确指定它的工作队列 *shadow queue*实际是一个GCD queue,而不是一个线程. 原生模块 如果你还不知道如何创建…