CSDN产品官方博客

2004年，对于前端社区来说，是里程碑式的一年。Gmail横空出世，它带来基于前端渲染的原生应用级别的体验，相对于之前的服务端渲染网页可谓提升了一个时代，触动了用户的G点。自此，前端渲染的网站成为无数开发者追逐的方向。为了更好地开发前端渲染的“原生级别的”网站，包括Backbone和Angular在内的一系列前端框架应运而生，并迅速获得了大规模的采用。但是很快地，新的性能和SEO问题也接踵

React Native 学习笔记写在前面简单介绍布局FlexBox组件化的UI控件值传递网络请求总结及一些坑

【编者按】本篇文章的作者是 Joyce Echessa——渥合数位服务创办人，毕业于台湾大学，近年来专注于协助客户进行 App 软体以及网站开发。本篇文章中，作者介绍通过 React Native 框架构建一个示例应用的开发过程，使得网络技术和移动开发碰撞出绚丽火花，本文系 OneAPM 工程师编译整理：我们已经了解像 Titanium 和 PhoneGap 等框架，它们能让开发者用 Web 技术构

原文：http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript 注意：所有图片放在了百度相册空间，如果你看不到图片，请复制图片URL，然后粘贴到地址栏中进行查看。开始ReactNative 框架可以在GitHub 获得，你可以使用git clone命令或者直接下载zip包来获取它。 Re

数月前，Facebook 对外宣布了正在开发的 React Native 框架，这个框架允许你使用 JavaScript 开发原生的 iOS 应用——就在今天，Beta 版的仓库释出了！基于 PhoneGap 使用 JavaScript 和 HTML5 开发 iOS 应用已经有好几年了，那 React Native 有什么牛的？React Native 真的很牛，让大家

1.中文翻译(极客学院)http://wiki.jikexueyuan.com/project/react-native/tutorial.html2.原文http://facebook.github.io/react-native/docs/getting-started.html#content目前react native只有iOS版的。

最近几年，前端技术迅猛发展，差不多每年都会冒出一款主流的框架。 每次新开业务线或启动新项目时，首先第一件事就是纠结：使用什么框架，重造什么轮子？我很高兴应CSDN的邀请谈我的看法。RequireJS，前端技术发展分水岭在五六年前，移动端还没有兴起，我们没有什么选择，就是jQuery。有人会说，jQuery只是类库，不是框架；但那时前端业务还没有像今天这么繁重，原本是后端干的事，

Android SetupNode之前是安装iojs，现在又改为node了，安装的版本为最新版本4.0:nvm install node######################################################################## 100.0%Checksums emptyNow using node v4.0.0 (npm v2.14.2)

StatusBarIOS方法 名称 意义 setStyle 设置样式 setHidden 设置隐藏 setNetworkActivityIndicatorVisible 设置网络小菊花是否可见实例'use strict';var React = require('react-native');var { StyleSheet, View, Text,

PushNotificationIOS方法 名称 意义 presentLocalNotification 立即显示规划好的通知 scheduleLocalNotification 规划通知 setApplicationIconBadgeNumber 应用图标右上角的小红泡中数字 getApplicationIconBadgeNumber 得到应用图标上小红泡的

AppStateIOS3种状态activebackgroundinactiveinactive是一个过度状态,处于前台，但是没有处理事件。方法addEventListener:添加监听removeEventListener:移除监听

AppRegistryAppRegistryAppRegistry是一个JS对象，指代所有React Native APP，App的root组件需要通过AppRegistry.registerComponent注册。然后原生系统会通过AppRegistry.runApplication加载App的bundle方法 名称 意义 registerConfig 静态方法，注册配置 re

AlertIOS react-native在线运行器方法static alert(title: string, message?: string, buttons?: Array<{ text: ?string; onPress?: ?Function; }>, type?: string)：无输入弹出框static prompt(title: string, value?: strin

今天在翻译React native官方网站的文章时，发现了一个好东西，可以在线编辑React native程序，且可以查看运行效果，是不是比较炫酷？网址React Native Playground打开后默认界面如下:创建应用登陆成功后，选择NEW APP菜单创建自己的APP，然后会出现如下界面：然后我们点击右边的设备，可以查看效果：修改在面板左边的在线编辑器中进行修改后，按Ctrl+s时会实时的

WebView属性 名称 类型 意义 默认值 automaticallyAdjustContentInsets bool bounces bool contentInset {top: number, left: number, bottom: number, right: number} html string

TouchableWithoutFeedback属性 名称 类型 意义 默认值 accessible bool 触摸释放时通知 无 delayLongPress number 按下延迟(ms) 无 delayPressOut number 抬起延迟(ms) 无 onLongPress function onPre

TouchableOpacity属性 名称 类型 意义 默认值 activeOpacity number 模糊度 无

TextInput

Text属性 名称 类型 意义 默认值 allowFontScaling bool 设置是否允许iOS中辅助工具扫描 无 numberOfLines number 可显示的行数，超过该行后，用省略号代替 无 onLayout function {nativeEvent: {layout: {x, y, width, height}}}该表布

TabBarIOS.Item属性 名称 类型 意义 默认值 badge string,number 小红泡 无 icon Image.propTypes.source 自定义图标 无 onPress function 当元素被选择时的回调函数 无 selected bool 表示子视图中控件是否可用 false se

TabBarIOS属性 名称 类型 意义 无 barTintColor string 分页栏的背景颜色 无 tintColor string 选中的分页背景颜色 无 translucent bool 是否半透明 无 style style 样式 无

SwitchIOS属性 名称 类型 意义 默认值 disabled bool 是否可用，若为true，不可用 false onTintColor string 当开关打开后，背景颜色 无 onValueChange function 当用户切换开关时的回调函数 无 thumbTintColor string 开关圆形按钮的背

SliderIOS属性 名称 类型 意义 默认值 maximumTrackTintColor string 当前按钮右侧的颜色 蓝色渐变 minimumTrackTintColor string 当前按钮左侧的颜色 蓝色渐变 maximumValue number 最大值 1 minimumValue number 最小值

UISegmentedControl属性 名称 类型 意义 默认值 enabled bool 是否可见 true momentary bool 是否瞬间完成，如果为true，看不到视觉上的选择效果 无 onChange function 当用户点击某个分割项时触发的函数，传入的是事件 无 onValueChange functi

ScrollView属性 名称 类型 意义 默认值 contentContainerStyle StyleSheetPropType(ViewStylePropTypes) 滚动视图中子视图的内容样式 无 horizontal bool 水平还是垂直，true为水平 false keyboardDismissMode (iOS特有)enum(‘

ProgressViewIOS属性 名称 类型 意义 默认值 progress number(0~1) 进度的百分比 无 progressImage Image.propTypes.source 将图片对象作为进度条 无 progressTintColor string 进度条的颜色 无 progressViewStyle en

PickerIOS属性 名称 类型 意义 默认值 onValueChange function 改变值的时候调用改方法 无 selectedValue any 选择的值 无

NavigatorIOS属性 名称 类型 意义 默认值 barTintColor string 导航栏的背景颜色 无 initialRoute {component: function, title: string, passProps: object, backButtonIcon: Image.propTypes.source, backButtonTit

Modal属性 名称 类型 意义 默认值 animated bool transparent bool

Navigator属性 名称 类型 意义 默认值 configureScene function 配置Scene切换的动画效果 无 initialRoute object 设置场景的开始route 无 initialRouteStack object route栈，如果没有initialRoute，该initialRouteStack对象就

MapView属性 名称 类型 意义 默认 annotations [{latitude: number, longitude: number, animateDrop: bool, title: string, subtitle: string, hasLeftCallout: bool, hasRightCallout: bool, onLeftCalloutPress:

ListView属性 名称 类型 意义 默认值 dataSource ListViewDataSource 数据集 无 initialListSize number 设置第一页初始化的元素个数 无 onChangeVisibleRows function 当有元素的可见性发生改变的时候，该函数会被调用，(visibleRows, chang

ImageImage展现图片的控件属性 名称 类型 意义 默认值 onLayout function 布局改变时调用该属性设置的函数 无 resizeMode enum 当图片和控件大小不匹配时采取什么规则来调整图片(‘cover’, ‘contain’, ‘stretch’) cover source {uri:string}, number

DatePickerIOSDatePickerIOS日期选择控件属性 名称 类型 意义 默认值 date Date 当前选择的日期基础 无默认值，必须显式设置 minimumDate Date 选择范围的最小值 无 maximumDate Date 选择范围的最大值 无 minuteInterval enum 分钟选择的间隔

ActivityIndicatorIOSActivityIndicatorIOS小菊花控件，动态指示图标，一般在比较耗时的操作中使用，用来做用户友好性提示。属性 名称 类型 意义 默认 color String 小菊花的颜色 gray hidesWhenStopped bool 停止转动时是否隐藏 true animating bool 是

源码/** * Sample React Native App * https://github.com/facebook/react-native */'use strict';var React = require('react-native');var { AppRegistry, StyleSheet, Text, View,} = React;var hello

参考文章: debug Memory leak in profilereact-native的开发者选项在模拟窗口上按Ctrl+Command+z会调出react native的开发者选项:Reload重新运行程序，类似于在Xcode中按Command+R.Debug in Chrome在Chrome浏览器下调试，在chrome浏览器下输入http://localhost:8081/d

教程作业展示问题总结我使用的xcode7，所以RCTDownloadTaskWrapper.m文件有一个小bug,如果修改不对的话，会造成图片加载失败(我刚开始就是写了一个空实现的匿名对象，造成无法下载图片，后来按照github上的方法修改了一下就可以了)，我在前面一篇文章也提供了如何正确修改。源码github持续更新中

今天把react native环境搭建完成，然后运行个小demo试试. 第一篇环境配置 & Hello World总结按照上面的学习文章，我基本完成，但是在配置过程中遇到2个问题，需要终结一下。已安装node由于我安装react-native之前已经安装过node，我们执行的话会报错，这个错误就是因为react-native使用的是io.js,这个时候我们需要安装io.js，而你必须删除no

CameraRoll方法 名称 作用 saveImageWithTag 保存图片到相册 getPhotos 从相册中得到图片实例'use strict';var React = require('react-native');var { CameraRoll, Image, SliderIOS, StyleSheet, SwitchIOS, Tex