前言: React Native开发作为一种新型的移动开发方式,个人觉得App的一部分需求会逐步替换成这种方式,也是公司移动开发人员所必须掌握的一种开发技术,所以鉴于这种情况我觉得很有必要学习一下,特此开贴记录一下整个学习过程. 什么是HTML文件? HTML的英文全称是Hypertext Marked Language,中文叫做“超文本标记语言”. 和一般文本的不同的是,一个HTML文件不仅包含文本内容,还包含一些Tag,中文称“标记”. 一个HTML文件的后缀名是.htm 或者是.html.

在不使用任何RN动画相关API的时候,我们会想到一种非常粗暴的方式来实现我们希望的动画效果——通过修改state来不断得改变视图上的样式. 我们来个简单的示例: var AwesomeProject = React.createClass({ getInitialState() { return { w: 200, h: 20 } }, _onPress() { //每按一次增加近30宽高 var count = 0; while(++count<30){ requestAnimationFra

LayoutAnimation - layout动画 当布局发生改变时的动画模块,它有两个方法: 1. 最常用的方法是 LayoutAnimation.configureNext(conf<Object>),用于设置布局变化时的动画类型,在调用 setState 之前使用. 其中 conf 参数格式为: { duration: 700, //持续时间 create: { //若是新布局的动画类型 type: 'linear', property: 'opacity' }, update: {

Alert - 弹窗 通过 Alert.alert() 方法调用唤起原生弹窗,点击会触发 onPress 回调(参考下方代码)并清除弹窗. import React, { AppRegistry, Component, StyleSheet, Alert, Text, View } from 'react-native'; class AwesomeProject extends Component { componentDidMount(){ Alert.alert( 'Alert标题', '

前言 React Native的开发思路是通过组合各种组件来组织整个App,在大部分情况下通过组合View.Image等几个基础的组件,可以非常方便的实现各种复杂的跨平台组件,不过在需要原生功能支持.对性能有要求的情况下还是需要进行一定的原生的开发,合理的组件实现方式可以降低使用和跨平台的成本. (底层实现分析参见:React-Native 渲染实现分析,本文仅讨论组件开发方法) React Native组件开发 RN的组件开发有几种方式,JS组件.Native功能组件.NativeUI组件.J

前言 React Native与传统的HybirdApp最大区别就是抛开WebView,使用JSC+原生组件的方式进行渲染,那么整个App启动/渲染流程又是怎样的呢? React Native启动流程 首先从组件的角度来看下RN的启动流程:(Android为例) Native初始化,主要流程:ReactNativeHost -> Activity -> ReactRootView -> startReactApplication -> createReactContextInBac

前言 动画对于客户端来说是非常重要的一部分,直接影响到应用的用户体验.前端对于动画优化通常使用CSS3样式来实现动画,以利用GPU加速特性.而React-Native由于渲染模式的不同,无法使用CSS样式的方式优化. React-Native的实现 React-Native在动画方面有两个主要方式,一个是Animated,一个是LayoutAnimation. Animated Animated动画库的原理是由JavaScript来进行动画的计算,然后在每帧设置对应组件的style来实现动画过程

近段时间一直在忙,所以博客也没有更新,这两天我翻了一下写的这几篇博客,感觉写的都很片面,所以,我想重新写一个系列教程,从最基础的开始,来让大家更容易学会React-Native. 这个系列大部分只介绍Android和iOS通用的部分 一.关于RN环境搭建 这个问题我在博客上写过,既然是系列教程,那么就在这个系列里面重新再写一遍 1.Mac上搭建RN开发环境 安装homebrew:打开终端输入 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubuse

刚好今天七夕,呆萌的程序猿没有妹纸,刚好发小明天结婚,我还在异地,晚上还要苦逼的赶火车.趁着下午比较闲,更新一下Blog,也算是在百无聊赖之时给众多单身程序猿们的小福利吧,虽然已经好久没更了...囧 前面说过,我是做iOS的,但是最近看的RN多了,感觉RN写着比OC写着舒服多了,对比最强烈的就是布局方面,苦逼的手写Autolayout代码.写过的肯定懂得,用Frame写的就不说了... 好的,废话不多说,现在进入正题 咱们先看一下官方文档给的例子 我就直接粘过来了,想深入了解的来戳这里 'use

前段时间搭建项目使用了navigator和react-native-tab-navigator,现在我教大家搭建一个通用的简单框架. 先把几张图贴在这里,这就是我们今天要搭建的东西,别看页面简单,但是可塑性强啊(我才不会说我已经懒到一定程度了呢...)! 1.     2.            3. 上面的三张图就是咱们要搭建的简单框架. 大家都知道,一般一个app都有导航.tabbar以及tabbaritem的子页面.那么上面的第一张就是导航初始化的页面,图2是tabbar的页面,图3就是t

默默潜水了两年了,一直都在看大神们写的博客,现在我也分享一下跟RN导航有关的东西. 前两年我主要是做iOS开发的,现在刚找了份工作,应公司要求,现在开始学习reactnative的东西,由于我以前没怎么接触过JavaScript,所以我写的垃圾代码,请大神们不要见笑. 好了,废话不多说,在app里面navigation用的频率肯定不低,所以现在我分享一下这个坑. 首先,RN环境搭建教程太多,我就不说了,如果不会的同学可以直接看这里. 然后我们来新建我们的项目 打开终端,进入你想创建项目所在的目录

参考:http://www.lcode.org/react-native/ React native中文网:http://reactnative.cn/docs/0.23/android-setup.html#content 1.安装Jdk(最好默认安装路径尽量别改) http://jingyan.baidu.com/article/a24b33cd59b58e19fe002bb9.html http://www.jb51.net/article/36811.htm(三个环境变量都配置)  Ja

本文直接引用大神文档: [WINDOWS环境 React Native初识]com.android.ddmlib.InstallException: Failed to establish session白屏问题解析 详情: 今天,可算改完了自己名下的bug.没辙,谁让自己太菜,妹子不爱,所以闲来无事,挥锄头动动ReactNative. ReactNative理论就不说了,反正网上多的是.我要是能说,我也不在这里废话了,直接进入实战. 首先,你得安装JAVA JDK,安装android环境,配置

reactnative可以编辑iOS程序也可以编辑Android程序, 而且80%的代码都可以重用. 及有些文件是两个系统通用的, 相信大家也都清楚了. 但是也许大家会遇到一些屏幕布局的问题, 最常遇到的就是Android的状态栏我们是无法涉及的而iOS的就可以. 所以当一个component设置了marginTop时, 两个系统需要设置的数值是不一样的. 我们没必要为了一个style而创建两个文件(***.ios.js和***.android.js)当然这肯定能解决问题, 但是每次都这样做的花

本教程的实现效果如下: 为了实现其淡入/淡出的覆盖效果, 还有取消按钮, 在此用了一个三方的组件, 大家可以先安装一下: 三方组件的地址:https://github.com/eyaleizenberg/react-native-custom-action-sheet (可以看看,也可以直接按我的步骤走) 1. 在terminal的该工程目录下运行: npm install react-native-custom-action-sheet --save 2. 然后运行: npm start 3.

这个问题是我按了com + shift + K 调出Simulatior 的时候出现的, 然后虚拟机就刷新不了了, 怎么按com+r都不好使. 在Simulatior的菜单栏选择Hardware --> Keyboard  --> Connect Hardware Keyboard 选上就好了 官网解释: https://facebook.github.io/react-native/docs/troubleshooting.html#content 应该是快捷键冲突了,调出虚拟键盘,就用不了

各种问题汇总: 1.Unable to resolve modules lodash  (这里举例lodash,这个lodash也可以是别的.意思就是缺少当前模块,所以需要安装) npm install lodash --save 或(制定版本的命令): npm install lodash@3.10.1 2.babel@5.8.38 should be installed with -g npm install babel@5.8.38 -g 3.Unable to resolve modul

前言 在学习一门新技术的你也许有跟我一样的困惑,照着书上或者视频上的敲了.但是就是有各种问题没有出来自己想要的结果.我会将自己在这个过程中遇到的坑都记录下来,不一定全覆盖,但希望这些文章可以解决你的问题.   错误提示 Invariant Violation:Applicaction 项目名 has not been registered.This is either due to a require() error during initialization or failure to cal

react-native看到了给现有工程添加react-native环境的时候碰到一个问题: 如何往工程中添加 package.json文件,以及node_modules是怎么来的? 我开始的时候以为是自己创建的文件夹,package.json文件也是通过vim来写的. 但是就在写package.json时 写了一下我就感觉特别不方便.于是我想到了npm:node package manager. 尝试了一下,果然通过npm可以帮助我们完成这项任务. 具体操作: 1.进入你工程的根目录 2.np

主要记录一下最近使用RN 0.29.2版本遇到的适配的坑以及部分警告的解法. 适配类: 安卓输入框圆角.边框颜色.粗细等无法设置成功,需要在TextInput外面新增一个View设置圆角,TextInput本身设置背景透明可以解决. lineHeight样式在安卓上不能为小数,否则崩溃. TextInput的editable属性设置之后即便为true,iOS的清空按钮也不能点.workaround:不设置editable,通过不更新state来限制输入. Text的numberOfLines设为

我们常见某些APP上滑的时候,NavBar颜色会从透明渐变为某种颜色 原理非常简单,根据scrollView的回调动态修改NavBar的透明度即可. 在RN中,尤其是ListView中这个回调不是很好找,故贴一下方便别人找到. 1.scrollView <ScrollView onScroll={(event)=>{this.setState({scrollOffset:event.nativeEvent.contentOffset.y});}} scrollEventThrottle={15