如是我闻

学习RN，官方示例是必不可少的，研究和学习官方示例会带来许多帮助。 在搭建好rn环境之后就可以着手尝试运行官方示例来看下RN的各类组件了。 先决条件nodenpmRNGitGradleADK/SDK开始首先下载RN代码 Github: https://github.com/facebook/react-native 下载成功后 命令行切换到目标目录 执行npm install

现在我们已经做了一个简单的登录示例,它包含的知识点有页面布局、图标字体的使用、结构化开发、远程数据获取等。 代码在这里那么如果想让自己的水平提高一个层次,此时你应该注意到了要玩转RN你应该储备如下技能 1.Flex布局:Flex 布局教程 2.ES6语法:这里有一份 ES5 ES6对照表 下面是一点补充说明 完整教程可以看阮一峰的es6 入门教程 es6语法说明 …Obj ,三个点遍历

写在前面目前最热的框架之一,可以通过更新远端JS，直接更新app, 用 JavaScript 调起 native 组件，将增强与高性能组件交给 native 来处理 ，相比其他hybrid框架而言并非通过webview来调用原生组件,而是直接调用操作系统自带的javascriptCore React Native only supports Android 4.1 and above由于Fac

先决条件rn 0.23npm 3.7.3node 5.9.1system winXpython 2.7.x前言　　开发过程中各式各样的图标自然少不了,如果能使用fontawesome等图标字体,自然可以带来极大的方便,然而在rn中并无法直接引用,还好已经有人做好了相关组件,react-native-vector-icons便是其中的佼佼者. 　　如果你对此组件感兴趣可以去github页

前言　　通过前面的一系列联系现在页面布局技巧已经掌握,页面跳转已经搞定,页面之间的参数传递也已经搞定,我们的代码也进行了分层组织,但我们的应用到现在为止都是死的.如何让应用活起来读取远程数据呢.此篇我们便是用fetch来拉去远程数据 　　当然如果你想了解更多方式和内容欢迎阅读官方文档开始 fetch可以接受两个参数,fetch(string,object),第一个参数是请求的远程地址;第二个参数

前言　　此文完全参考React-Native中文社区的博客新手理解navigator的教程而来,建议直接跳转链接进行详细学习,为防止链接失效或不可抗力因素无法访问,个人整理简单记录如下.开始由于前一篇文章将代码进行了分层整理,所以我们的index.android.js已经变得相对简洁 index.android.js'use strict';import React,{Navigator,AppR

随着代码复杂性的提高,对代码进行分层以及抽象是十分必要的.今天我们就对RN的项目结构进行简单的梳理. 　　这里主要是对样式文件和组件进行分离.可以以业务模块或者以页面的形式划分层级.具体结构如下　[ ] Project ROOT [ ] index.ios.js[ ] index.android.js[ ] android[ ] ios[ ] resources – 存放各类静态资源

创建阶段 getDefaultProps : 在创建类的时候调用,处理props的默认值,getDefaultProps仅会被调用一次，这里的意思是无论你会创建多少个ReactElement，这个函数都只执行一次，之后的默认props都会直接使用改函数的返回值。实例化阶段constructor(getInitialState):初始化组件state的值,返回值会赋值给this.state属性,这

Github上发现一只登录示例，拿来尝鲜,这里需要注意的坑有如下两点 1.关于注释，恩… // 单行 /*多行 */这个自然不用说，需要说的是，你得在外面加一层{}给包起来2.win下引用静态资源图片会出现引用到显示不出来的Bug(此bug0.13版本后已经修复)，关于这个问题参考链接1,2里给出了不同的解决方案，我这里采用的是Stackoverflow的解决方式。 官方的说法

执行 react-native start启动打包服务器,此时可以通过chrome打开http://localhost:8081/index.android.bundle?platform=android请求获取打包后的js文件,该文件是通过分析rn代码动态生成的,包含了应用中的全部逻辑.生成签名秘钥 用JDK自带的keytool工具生成证书： keytool -genkey -v -

react native 支持采用flex方式布局。默认情况下如果不设置flex容器的宽度，那么flex容器会100%自适应屏幕宽度。 学习flex布局要明白两个概念：主轴和交叉轴。所谓主轴即容器延伸方向，默认是row(横向延伸)，此时与水平垂直的轴即为交叉轴，反之亦然。 伸缩容器有以下六大属性 ：1.flexDirection(主轴方向,子元素在父容器中的排列位置) flexDirec

创建一个叫AwesomeProject的项目react-native init AwesomeProject升级react-native项目到最新版本react-native upgrade启动打包服务react-native start在安卓上运行debug程序react-native run-android在安卓上运行debug程序react-native android在苹果上运行debug程