
iOS_React-Native for FaceBook
文章平均质量分 68
Jsen_Wang
态度决定一切
展开
-
React-Native_学习笔记1: Unable to resolve module Dimensions from “...js” Invalid directory /Users/node_m
在使用第三方的组件的时候遇到如题的错误提示,原因是第三方组建中调用Dimensions 发生的错误,解决方法:修改第三方组件 “。js”文件中的代码var screen = require('Dimensions').get('window');更换成var screen = Dimensions.get('window');并且在变量定义列表中加入Dimen原创 2015-12-09 16:29:03 · 7387 阅读 · 3 评论 -
React Native-17.React Native 常用API及实践 AppStateIOS StatusBarIOS
实例:AppStateIOS简介AppStateIOS类似于iOS中的AppDelegate.h的作用, 我们可以通过他来获取APP运行过程中的各种状态,比如,激活状态,状态改变,还经常用来做推送通知。它拥有添加和删除事件的静态方法,因此,我们可以在代码中添加事件监听,属性和事件如下:currentState : 我们可以通过AppStateIOS.currentState获取当前App的属性。原创 2016-03-07 14:46:32 · 1840 阅读 · 0 评论 -
React Native-18.React Native 常用API及实践 NetINfo
没图你说个xxNetInfo简介NetInfo 用来获取网络状态。提供的属性方法如下: - isConnected : 表示网络是否连接 - fetch(): 获取网络状态 - addEvent Li 沙特呢人(eventName,handler):添加事件监听。 - removeEventListener:(eventName,handler):删除事件监听。其中,网络状态主要有以下几种类原创 2016-03-07 15:22:18 · 2120 阅读 · 0 评论 -
React Native-12.React Native WebView组件详解
WebView组件简介目前的WebView支持的属性如下:automaticallyAdjustContentInsets: 表示是否自动调整内部内容,其值为true或者false。bounces: 回弹效果。如果其值为false,则内容拉到底部或者头部不回弹。其值默认为true。contentInset: 内部内容移植,该值为一个JavaScript对象{top:number,left:nu原创 2016-02-23 12:26:53 · 6802 阅读 · 0 评论 -
React Native-13.React Native 常用API及实践 AppRegistry
AppRegistry简介AppRegistry是RN应用的入口函数。程序入口组件使用AppRegistry.registerComponent来注册。当注册完应用程序组件后,Native系统(OC)就会加载jsbundle文件并触发AppRegistry.runApplication运行应用。AppRegistry有以下方法:registerConfig(config:Array): 静态方法,原创 2016-02-24 14:51:08 · 3529 阅读 · 0 评论 -
React Native-14.React Native 常用API及实践 AsyncStorage
AsyncStorage简介AsyncStorage,我们完全可以理解它为iOS中的NSUserDefalut。它有很多方法,每一个方法都有回调函数,第一个参数是错误对象,错了就是展示错误信息,否则为null。都会返回一个Promise对象。static getItem(key:string , callback:(error,result)): 根据键来获取值,获取的结果会在回调函数中。sta原创 2016-02-24 16:37:46 · 5933 阅读 · 1 评论 -
React Native-15.React Native 常用API及实践 AlertIOS AlertSheetIOS
动起来,我们来看个效果AlertIOS简介完全理解成iOS中的UIAlert, 有两个方法:alert(title,message,buttons) : 普通对话框,其中buttons是对象数组。prompt(title,value,buttons) : 提供输入的对话框,其中buttons是对象数组。AlertSheetIOS简介完全理解成UIActionSheet.但是它还可以换出系统自原创 2016-02-25 11:56:59 · 2861 阅读 · 0 评论 -
React Native 环境配置
React Native 环境配置 最近又很多朋友问我React Native 环境配置怎么弄,这边整理了一下。我们需要安装的东西:1,homebrew(可以理解成应用商店,用来安装wathcman,nvm) 2,node(安装了node , npm 那些命令才可以用) 3,watchman(如果不安装,可能会遇到一个有bug的文件) 4,nvm (使用nvm)安装homebrew1,打原创 2016-03-25 13:44:24 · 559 阅读 · 0 评论 -
React Native -19.React Native Timer定时器的使用
React Native -19 Timer定时器的使用 背景:React Native Version:0.3.1 语法 ES6Step1:介绍RN的定时器就是一个创建方法。并没有像iOS一样的NSTimer类 根据官方提供的文档,定时器有四种形式: • setTimeout, clearTimeout • setInterval, clearInterval原创 2016-10-09 17:29:08 · 9870 阅读 · 0 评论 -
React Native -20.React Native 自定义组件(跨文件,类似创建一个类)
哈哈的~~~今天介绍的是自定义组件 然后去使用这个组件,让这个组件传递这各种文件之间 哈哈 下面开始吧!!!!我们所要创建的是一个自定义的Button,先创建一个js文件起名为MyButton, 且触摸后的底色、触发事件响应的函数、图片资源、以及图片大小都是根据传过来的值确定的。(所传递进来的参数决定)ok!!下面我们需要在MyButton.js 这个文件中添加一些原生转载 2016-10-10 00:10:57 · 2272 阅读 · 0 评论 -
React Native-16.React Native 常用API及实践 PixelRatio
React-Native 中的 PixlRatio简介PixlRatio 用来获取像素相关的数据。常用的静态方法: get(): 获取像素密度。如: PixelRatio.get()===2 iPhone 4 ,4s iPhone 5 ,5c ,5s iPhone 6原创 2016-03-02 18:58:32 · 3453 阅读 · 0 评论 -
React Native-11.React Native TabBarIOS TabBarIOS.Item组件详解
TabBarIOS组件简介等同于iOS中的UITabBar TabBarIOS 组件属性介绍:barTintColor: Tab栏的背景颜色。tintColor : 当我们选中了某一个Tab时,该Tab的图标颜色。translucent : Tab栏是否透明。TabBarIOS.Item组件简介等同于iOS中UITabBarItem badge : 红色的提示数字,可以用作消息提醒。i原创 2016-02-19 16:23:34 · 2734 阅读 · 0 评论 -
React Native-10.React Native Image组件详解
Image组件简介老话说,没图你说个xx,可见图片在用户感官上的重要性。RN中,Image组件目前支持的属性如下:resizeMode : 枚举类型,(cover,contain,stretch)。表示图片适应的模式。source: 图片的引用地址,值为:{uri: string}。如果是本地的静态资源,需要使用 require(`image!name`)包裹。defaultSource :原创 2016-02-19 10:25:19 · 5383 阅读 · 0 评论 -
React Native-1.CSS布局属性之伸缩容器属性
为什么要学习CSS布局属性首先,React Native使用JSX语法(后边的博客会详细讲解)来编程,它其实是一个语法糖,React Native 的代码格式和原来的HTML + CSS 的代码格式有些相似,重要的是,它布局的属性和CSS的布局属性基本是差不多的,所以,我们从CSS的布局属性过渡到React Native 的布局属性,会更加平滑好理解,毕竟它的岁数大很多。。。常用的CSS布局属性“原创 2016-01-15 15:23:51 · 6344 阅读 · 0 评论 -
React Native-2.CSS布局属性之伸缩项目属性
接上一篇blog《React Native-1.CSS布局属性之伸缩容器属性》我们继续学习伸缩项目属性伸缩项目属性伸缩项目支持的属性有orderflex-growflex-shrinkflex-basisflexalign-self下面我们介绍这6个属性1、order这个属性用语定义项目的排列顺序。数值越小,排列越靠前,默认为0,可以为负数。语法: order:integerCSS代原创 2016-01-15 17:43:31 · 1116 阅读 · 0 评论 -
React Native-3.React Native中的主要布局属性介绍和练习
我们搞出些事情 我们上两节学习了CSS的伸缩属性标签的作用和效果实现,这一节我们顺势学习一下在React Native 中是使用flexboxReact Native 中的主要flexbox属性介绍alignItemsalignSelfflexflexDirectionflexWrapjustifycontentJust Do it1、alignItems该属性的用法和欠扁的al原创 2016-01-20 13:17:42 · 3906 阅读 · 0 评论 -
React Native-4.React Native布局属性练习之flexBox模型实战
废话不多说,学以致用! 上代码~使用react native init 创建的项目中,在index.ios.js中编写的代码: wxsPrj 是我的工程名字,如果你的工程名字是xxx,那么请把下列代码中出现的所有wxsPrj 换成你的xxx 然后覆盖原来index.ios.js 中的所有代码,运行一下,得到的效果如下图所示:'use strict';var React = require('原创 2016-01-27 13:43:58 · 1185 阅读 · 0 评论 -
React Native-5.React Native组件封装,组件传值实例开发
接上一篇,我们来练习一下组件的封装和组件的传值九宫格例子:老样子,我们又图,没图说个xx 预期效果: 先来看看没有封装组件前的代码'use strict';var React = require('react-native');var { AppRegistry, StyleSheet, Text, View, PixelRatio,} = React;var st原创 2016-01-27 17:33:26 · 4475 阅读 · 0 评论 -
React Native-6.React Native Text组件,多组件封装实战之凤凰资讯页面
现来个图:没图说个xx 先来分析怎么做一个导航栏一个列表一个摘要列表大体可以分为上中下三个模块,那么我们从上到下一次封装。我们来搞出些事情创建.js文件,一个组件一个.js文件我们通过命令行工具,进入工程所在的文件夹,使用touch命令创建三个组件对应的文件命令如图:localhost:iOSFile WangXuesen$ touch list.jslocalhost:iOSFile原创 2016-01-29 14:31:01 · 1517 阅读 · 0 评论 -
React Native-9.React Native Touchable组件详解
Touchable系列组件简介RN中没有web中给元素绑定click事件的机制,但是在上一节中我们知道Text组件中我们可以绑定onPress事件来触发点击事件,为了像Text组件那样使得其它组件可被点击,RN提供了3个组件来做这个事情: - TouchableOpacity: 透明触摸,点击时点击的组件会出现透明的偷渡效果。 - TouchableWithoutFeedback: 无反馈性触摸原创 2016-02-13 23:10:15 · 2260 阅读 · 3 评论 -
React Native-7.React Native NavigatorIOS组件详解
老样子,先上图: 图也看了,先听老王给你讲讲政治课NavigatorIOS 是RN中的一个组件既然是一个组件,那么他就有一堆属性来完成不同的需求:属性讲解barTintColor : 导航条的背景颜色initalRoute : 在RN 中导航名为“路由”(学过网络的应该明白这个词的意思), 作用就是指路的,大家可以这么理解,这个属性是一个方法,用来初始化导航的。itemWrapperS原创 2016-02-01 11:18:59 · 4435 阅读 · 2 评论 -
React Native-8.React Native TextInput组件详解
TextInput组件介绍输入框组件的主要属性如下:autoCapitalize : 枚举类型,可选值有none,sentences,words,characters.当用户输入时,用于提示。placeholder:占位符,在输入前显示的文本内容。value : 文本输入框的默认值。placeholdertTextColor : 占位符文本颜色。password : 如果为ture , 则原创 2016-02-02 17:56:06 · 21635 阅读 · 0 评论 -
React Native -21.React Native Fetch网络请求
在 JS 中使用 fetch 更加高效地进行网络请求在前端快速发展地过程中,为了契合更好的设计模式,产生了 fetch 框架,此文将简要介绍下 fetch 的基本使用。在 AJAX 时代,进行请求 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求。现在产生的 fetch 框架简直就是为了提供更加强大、高效的网络请求而生,虽然在目前会转载 2016-10-10 17:26:21 · 1273 阅读 · 1 评论