react-native 学习（一）

React Native 学习-01

React Native 学习 (学习版本 0.39) 一.环境配置二.IDE选择 webstorm 1.webstorm配置 ①.首先是可以选择使用汉化包汉化.eu68 ②.安装插件和外部库. 由于React Native 的API众多.不便于记忆.可以使用外部库来实现. 推荐的插件: ReactNative-LiveTemplate github地址使用方法:file -> import settings -> ReactNative.jar 即可 reactdefinitelyTyp…

react native 学习一(环境搭配和常见错误的解决)

react native 学习一(环境搭配) 首页,按照http://reactnative.cn/docs/0.30/getting-started.html#content上的介绍,下载安装python2.nodejs.git.Android Studio.这里前面两个都比较好装,android studio装起来相当慢,其实应该只用装sdk就行了,安装sdk可以按http://www.androiddevtools.cn/这个里面的方式设个代理. 软件装好了,就是环境变量设置了,添加AND…

React Native 学习资料

React Native 学习资料学习资料网址 React Native中文网 https://reactnative.cn/…

React Native 学习(三)之 FlexBox 布局

React Native 学习(三)之 FlexBox 布局…

React Native 学习笔记--进阶（二）--动画

React Native 进阶(二)–动画动画流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更精细的交互控制的动画Animated. Animated Animated库使得开发者可以非常容易地实现各种各样的动画和交互方式,并且具备极高的性能.Animated仅关注动画的输入与输出声明,在其中建立一个可配置的变化函数,然后使用简单的start/stop方法来控制动画按顺序执行.示例: 1 2…

iOS、swift、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…

react native 学习资料整理

入门教程深入浅出 React Native:使用 JavaScript 构建原生应用 http://www.appcoda.com/react-native-introduction/ 中文版 http://www.cocoachina.com/ios/20150408/11513.html react 做的一款打分app 入门教程 http://www.oschina.net/translate/going-native-with-react react-native 之布局篇 https…

iOS 写给iOS开发者的React Native学习路线(转)

我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了.网络上知识资源非常的多,但能让人豁然开朗.迅速学习的还是少数,我整理出的这些文章对于初学者来说是比较有好的,希望通过整理我的学习路线,能给同样作为iOS开发者,想学习React Native的朋友们一些帮助. 既然是写给iOS开发者的,那么我默认你已经掌握iOS原生应用开发的基本知识,所以对iOS原生开发的相关内容不做解释说明. React Native概念介绍…

React Native学习方法论

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

react native学习资料

一:基础学习: react-native中文文档(react native中文网,人工翻译,官网完全同步)http://react-native.cn/docs/getting-started.html React-Native入门指南https://github.com/vczero/react-native-lesson React Native布局篇https://segmentfault.com/a/1190000002658374 二:目前RN app有很多,这里只列举几个开源app…

写给iOS开发者的React Native学习路线(转)

我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了.网络上知识资源非常的多,但能让人豁然开朗.迅速学习的还是少数,我整理出的这些文章对于初学者来说是比较有好的,希望通过整理我的学习路线,能给同样作为iOS开发者,想学习React Native的朋友们一些帮助.既然是写给iOS开发者的,那么我默认你已经掌握iOS原生应用开发的基本知识,所以对iOS原生开发的相关内容不做解释说明. React Native概念介绍…

React Native学习

学习首先,假使你已经安装了Nodejs 6,也有使用npm进行Nodejs的包管理 npm install -g react-native-cli 也可以使用yarn作为包管理工具 npm install -g yarn 安装Android Studio 配置系统变量创建react native 工程 react-native init projectName #projectName是项目名称,可以任意运行react native 工程 react-native start 运行reac…

React Native学习(二)之View

React Native组件解析(二)之View 0.JSX React的核心机制之一就是虚拟DOM:可以在内存中创建的虚拟DOM元素.React利用虚拟DOM来减少对实际DOM的操作从而提升性能. JSX的语法如下 return ( <View style={styles3.container}> <Text> 当前屏幕的宽度:{Dimensions.get('window').width} </Text> </View> ); 在实际开发中,JSX在产品…

React Native学习笔记之2

1:如何创建一个react native工程首先进入到指定文件夹里面,然后在终端执行react-native init ReactNativeProject :其中ReactNativeProject为工程的名称: 2:如何运用调试可以先安装Chrome浏览器的插件React Developer Tools 然后运行时在虚拟器上按command+D就会弹出选择,可以用Stop Remote JS Debugging 就可以进入调试页面,然后再按command+alt+J 就可以进入调试的详细…

React Native学习笔记之1

1:运行React Native报连接错误解决解决方式: 在终端进入项目文件里,然后执行:(cd Pods/React; npm run start) 2:组件生命周期介绍创建阶段 1. getDefaultProps 作用于组件类,也就是调用React.createClass()的时候被调用. 每次创建组件的时候执行且只执行一次,方式如 reload Js. 用来处理props的默认值. note : 如果在JS文件中定义了一个组件,但是没有使用它,此组件的getDefaultProps也…

react native学习1－安装，执行

demo地址 http://www.oschina.net/p/reactnative http://my.oschina.net/luyongfugx/blog/394427#OSC_h1_1 翻译得很好深入浅出react native http://www.cocoachina.com/ios/20150408/11513.html 安装react native:按照官网 http://facebook.github.io/react-native/docs/getting-started…

React Native学习（二）—— 开始一个项目

本文基于React Native 0.52 一.创建一个项目 1.初始化一个RN项目 react-native init RNDemo 2.连接一个设备或是打开模拟器可以通过 adb devices 查看连接的设备,如下图: 3.进入RNDemo目录下,运行项目 cd RNDemo react-native run-android 运行成功如下图: 二.项目目录 app文件夹 -- 自己创建的,自己写的页面都放在这里面 App.js -- 整个应用的根容器 index.js -- 在这里面将A…

React Native学习（一）——搭建开发环境

第一次接触React Native,首先搭建环境,过程还算顺利,不过也遇到了些问题,这里简单记录下来.中文官网(http://reactnative.cn/docs/0.47/getting-started.html#content) 1.下载安装Python2(不支持Python 3) 官网建议使用Chocolatey来安装,但是Chocolatey需要FQ,所以我是直接下了Python2. 2.下载安装node 这个也是直接下载安装的,原因同上. 安装完node后建议设置npm镜像以加速后面…

React Native学习（三）—— 使用导航器Navigation跳转页面

本文基于React Native 0.52 参考文档https://reactnavigation.org/docs/navigators/navigation-prop 一.基础 1.三种类型 TabNavigator -- 用于设置多个选项卡的页面 StackNavigator -- 用于页面之间的跳转 DrawerNavigator -- 用于侧面滑出的抽屉效果 2.属性配置 navigate(routeName, params, action) -- 跳转页面 routeName:目标路…

React Native学习（四）—— 写一个公用组件（头部）

本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-Demo 一.总览头部通常分为左.中.右三部分,效果图如下: 二.头部组件 1.创建components文件夹,新建commonHead.js 2.commonHead.js 头部分为左.中.右三块,我们需要提供接口,获取外部传入的值,从而判断哪一块需要创建. static propTypes =…

React Native学习（六）—— 轮播图

本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-Demo 一.总览轮播图几乎是必备的效果,这里选择 react-native-swiper 来实现,效果如下图: 二.实现轮播图效果 1.通过npm安装react-native-swiper npm install react-native-swiper --save 2.在recommend.js…

React Native学习（七）—— FlatList实现横向滑动列表效果

本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-Demo 一.总览这个效果也是APP里很常见的,之前把这个想的太复杂了,后来才知道原来用FlatList就可以轻松实现,效果图如下(专题精选): 二.代码实现 1.加几条数据 topic: [ { title: '岁末清扫有它们,体验大不同', describe: '更轻松.更美好的大扫除攻略',…

React Native学习（八）—— 对接七鱼客服

本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-Demo 本文参考 https://github.com/qiyukf/react-native-qiyu 一.安装 npm install react-native-qiyu --save 二.配置修改android/settings.gradle,手动加入以下代码 include ':react…

React Native学习（九）—— 使用Flexbox布局

本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-Demo 一.主轴方向 flexDirection flexDirection决定主轴的排列方向. 1.column--竖直(默认) 2.row--水平二.主轴排列方式 justifyContent justifyContent决定其子元素沿着主轴的排列方式.(以下例子主轴方向为row) 1.fle…

React Native学习(一) 环境搭建

需安装工具 RN环境: [必须] Node [必须] react-native-cli [可选] Node Package Manager(npm):node包管理工具,一般安装Node会带上npm * [可选] Node Version Manager(nvm):node版本管理工具 * [可选] watchman * [可选] flow iOS端: [必须] Xcode 安卓端: [必须] Java环境 [必须] Android Studio [必须] Android SDK [必须] AN…

react native 学习笔记

假设你的机器现在还没安装任何环境. 不同的操作系统.不同的目标平台,具体的步骤也会有所不同.如果你想同时开发android和ios也没问题,只需要先选一个平台开始,另一个平台的环境搭建只是稍有不同本文以windows系统.android平台环境搭建为例. 1.安装chocolatey Chocolatey是一个Windows上的包管理器,类似于linux上的yum和 apt-get. 你可以在其官方网站上查看具体的使用说明.一般的安装步骤应该是下面这样: @powershell -NoPr…

react native 学习之 native modules

翻译自https://facebook.github.io/react-native/docs/native-modules-ios.html Native Modules 很多情况下,app需要使用原生的api,或者是用一些已经用OC.Swift或C++写好的模块,又或者需要写出更高效率的.或多线程的代码来支撑图像处理.数据库或其它高要求的需求. React Native的设计当然是支持我们使用原生特性的,以使平台本身的能力得以完全发挥.不过这相对来说是比较进阶的功能,他们的存在虽然是必要的,…

【react-native 学习（一）】的更多相关文章