React Native学习
文章平均质量分 81
youth_never_go_away
像市场和运营部的程序媛
展开
-
React Native 学习笔记一(认识React Native)
React Native 是有faceBook推出的 好处:组件化开发 能够降低开发成本 能够取代android 和iOS 原生开发 不用打包更新 使用热更新 成为全栈工程师的捷径技术背景:先投入大量精力在html5-->native app(在app store发布仍然很麻烦 性能强大)-->分合开发模原创 2016-09-09 18:05:47 · 622 阅读 · 1 评论 -
npm介绍
在学习React-Native的过程中 经常用到npm命令 顺便百度了一下关于npm这个东西(以前 没怎么接触过前端 ) 简单来说 其实就是对于Node_Moudle包的操作工具类nodejs的出现,可以算是前端里程碑式的一个事件,它让前端攻城狮们摆脱了浏览器的束缚,踏上了一个更加宽广的舞台。前端的可能性,从此更加具有想象空间。随着一系列基于nodes的应用/工具的出现,原创 2016-09-21 10:25:54 · 501 阅读 · 0 评论 -
React Native 学习笔记十四(原生模块之数据回调)
在使用原生模块的时候无法避免数据的获取 关于数据的获取 我这里模仿了网络请求获取数据 通过回调的方式 完成数据从java到js的传递官网上 基本上都是坑 写这篇文章给想我一样的小白来看 大神级别的 勿喷废话不说 上代码 实现思路和 上一篇文章一样 不会的朋友可以看看上一章创建 NetMoudle.java 实现网络请求 package com.example.zhangy原创 2016-09-20 17:07:21 · 2241 阅读 · 3 评论 -
React Native 学习笔记十三(原生模块之Toast)
在学习官网上的Toast 的过程中 出现很多的坑 废话就不说了 官网上都有 官网讲解实现思路 :我们之前已经将react-native 嵌入原生了 那么 我们就在之前的基础上进行修改就好了 创建ToastUtils.java 继承ReactContextBaseJavaModule 我们要明确自己的目的 就是使用js调用 Toast 就像android 原生一样 能够在屏幕底端原创 2016-09-20 14:40:02 · 2517 阅读 · 1 评论 -
React Native 学习笔记二十一(导航器三方 插件学习)
所有的app设计,都会考虑导航的问题,android一般采用底部tabbar,但是最新的设计方案,更多的倾向于头部tabbar,或者头部scrollTabBar。本方案还是采用底部模式。react-native最佳实践,推荐的解决方案, github地址 。 如何使用 react-native-router-flux 依赖于 ExNavigator ,所以首先要安装原创 2016-10-24 15:56:50 · 1936 阅读 · 1 评论 -
React Native 学习笔记二十一(定时器学习)
阅读本文大约需要3分钟今天主要讲解Timers(定时器)模块,该部分在我们开发中是非常常用的。例如可以实现:秒杀中的倒计时,任务延迟执行等等。本文所讲知识点定时器基本内容以及对比InteractionManager(交互管理器)TimerMinxin 定时器相关实例基本内容Timers(定时器)是应用中非常重要原创 2016-10-24 14:53:22 · 2187 阅读 · 0 评论 -
React Native 学习笔记二十(关于ListView的使用)
完整讲解链接使用三方封装的插件 完成 listView的下啦刷新 并添加网络请求 /** * Created by zhangyanjiao on 16/10/21. */import React, {Component} from 'react';import { PullList} from 'react-native-pull';import { S原创 2016-10-21 15:11:44 · 1018 阅读 · 2 评论 -
React Native 学习笔记十九(关于开发环境)
关于React Native 我使用的开发环境时webStrom 链接就不给了 自己搜吧 添加插件 就可以进行开发了 插件地址:https://github.com/virtoolswebplayer/ReactNative-LiveTemplateReactNative的代码模板,包括:组件名称Api 名称所有StyleSheets属性调用ReactNative原创 2016-10-21 14:48:37 · 393 阅读 · 0 评论 -
React Native 学习笔记十八(关于样式 补充)
之前关于样式 我们之前说到了 单一样式的设置 以及根据条件选择样式 今天将对前面的样式进行补充 将样式的创建放在最后 是为了 只创建一次 并不是每次render都进行创建样式覆盖import React,{ Component } from 'react';import { View, Text, StyleSheet}from 'react-nat原创 2016-10-20 15:54:42 · 367 阅读 · 0 评论 -
React-Native 学习笔记十七(网络请求)
关于网络请求 不多说了 例子上面都有注释/** * Created by zhangyanjiao on 16/10/20. */import React,{Component} from 'react';import { Image, View, StyleSheet, Text, ListView,ToastAndroid}from原创 2016-10-20 15:00:29 · 410 阅读 · 0 评论 -
React Native 学习笔记十六(细节分析)
//创建一个ReactRootView,把它设置成Activity的主视图mReactRootView = new ReactRootView(this);mReactInstanceManager = ReactInstanceManager.builder().setApplication(getApplication()).setBundleAssetName("index.原创 2016-10-19 12:03:47 · 642 阅读 · 0 评论 -
React Native 学习笔记十五(图片的使用)
从0.14版本之后 RN推出了 android 和ios共同管理图片资源 1.静态资源图片的使用在项目中添加一个文件夹 将图片资源放在文件夹中 然后 调用即可 (在图片命名的时候可以使用@2x 和@3x这种文件后缀 )├── button.js└── img ├── check@2x.png └── check@3x.pngpackage会打包所有图片原创 2016-09-21 11:18:06 · 2095 阅读 · 0 评论 -
关于React-Native的生命周期
概述就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle)。所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键。RN 组件的生命周期整理如下图:如图,可以把组件生命周期大致分为三个阶段:第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的原创 2016-09-21 14:40:29 · 421 阅读 · 1 评论 -
React Native 学习笔记四(关于state的使用)
前面我已经大概写了props和state 的区别 接下来整理下state的使用需要在constructor中初始化state(译注:这是ES6的写法,早期的很多ES5的例子使用的是getInitialState方法来初始化state,这一做法会逐渐被淘汰),然后在需要修改时调用setState方法。import { AppRegistry, StyleSheet, T原创 2016-09-13 13:55:20 · 5390 阅读 · 0 评论 -
React Native的props和stats
理解: props: 组件中父级向子级传递数据的方式 stats:在不操纵DOM树的情况下 刷新页面的一种方式(通过操作stats实现数据的时时变化) 大部分组件的工作应该是从props里取数据并渲染出来.但是,有时需要对用户输入,服务器请求或者时间变化等作出响应,这时才需要state.原创 2016-09-13 11:27:22 · 654 阅读 · 0 评论 -
React Native 学习笔记二(React Native开发环境的搭建for mac)
1.安装android studio(2.0版本以上)jdk 版本必须在1.8以上()2.下载sdk(必须下载23.0.1)ANDROID_HOME环境变量确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。具体的做法是把下面的命令加入到~/.bash_profile文件中:(译注:~表示用户目录,即/Users/你的用户名/,而小数点开头的文件在Fi原创 2016-09-09 18:08:01 · 579 阅读 · 0 评论 -
React Native 学习笔记六(关于宽高的设置)
继续在之前的例子上进行添加 尺寸1.使用固定的尺寸 设置View容器 和设置自定义的组组件 如果父组件的空间不足 自控件的会出现重叠的情况示例:import { AppRegistry, StyleSheet, Text, View} from 'react-native';class Blank extends Component{ //初始化s原创 2016-09-13 14:53:49 · 5336 阅读 · 0 评论 -
webstorm文件类型关联错误 导致文件打开方式不对 修改文件关联设置
webstorm关联文件类型之后 就会使用默认关联类型打开 一旦关联错误 很难修改 打开webstorm设置-->选择File Types -->显示所有的关联类型 点击已经选择的关联类型(如果不知道关联到哪里 就挨个点击 查看下面的扩展名 是否是想修改关联的扩展名)找到该扩展名之后点击 - 进行移除 保存即可 此时 邮件该类型的文件 又能够重新关联了原创 2016-09-19 11:51:40 · 11216 阅读 · 0 评论 -
React Native 学习笔记十一(页面跳转)
React Native 内置了几个导航器组件 推荐使用Navigator (原因:它是单独使用js实现的一个导航栈 因此 可以跨平台操作 同时便于定制)场景:场景 通俗的讲就是整个屏幕的排版布局显示,比如 又几个TextView 或者ScrollView等组件组成的一个界面 就是一个场景 或者是一个全屏的React组件 相对于场景来说 组件就是场景的部原创 2016-09-18 10:19:10 · 7783 阅读 · 0 评论 -
React Native 学习笔记十(ListView的使用)
关于 listView和scrollViewscrollView 垂直方向 可适用于不同组件和布局的混合(元素不同) 能够渲染所有元素(即使元素被挤出屏幕) 但是适用于 较短的滚动列表 listView 垂直方向 元素结构接近(数据不同而已) 不是渲染所有的元素优先渲染屏幕上的可见元素 适用于较长列表的滚动 listView的使用:必须有两个属性是dataSource(原创 2016-09-14 11:20:57 · 506 阅读 · 0 评论 -
React Native 学习笔记九(ScrollView的使用)
关于scrollView和android 中的使用效果是一样的 被包裹的组件和布局 能够实现滚动效果 注意:该组件适用于zi组件比较少的滚动元素class helloReact1 extends Component { render() { return ( ScrollView> Text style=原创 2016-09-14 11:12:29 · 768 阅读 · 0 评论 -
React Native 学习笔记八(文本输入的处理)
1.onChangeText()方法的使用 文本输入框的处理 和android中的思想是一样的 获取文本 然后进行文本的替换输出 不过在语法上面有很大差异 使用的方法是onChangText 在文本发生改变的时候 将文本放入state中 根据获取的state的值 来设置text中的显示内容示例如下:class helloReact1 extends Componen原创 2016-09-13 17:11:03 · 2529 阅读 · 1 评论 -
React Native 学习笔记七(关于布局的使用)
在React Native中使用flexbox(弹性盒子)来设置子组件的布局。Flexbox可以在不同屏幕尺寸上提供一致的布局结构(从而实现屏幕的适配 就像android中的比重适配一样)。一般来说,使用 flexDirection(排列方向)、 alignItems(子元素沿着次轴(与主轴垂直的轴,比如若主原创 2016-09-13 16:21:01 · 508 阅读 · 0 评论 -
React Native 学习笔记十二(嵌入原生应用 甚是坑啊)
1.首先 创建一个android studio 项目 我创建的叫HelloReactDemo2(随便起的)2 .按照官网的介绍来做 在Terminal中输入 npm init 会给出对应的提示 如图:此时会提示 输入信息 name 这是为了生成必要的package.json文件 按照如下图进行填写name: (HelloReactDemo2) hello原创 2016-09-20 11:58:19 · 4796 阅读 · 3 评论