React-native-example
React-native-example copied to clipboard
chenbin92
Learning react native
## ListView 组件的使用 ### 使用场景 用于展示垂直滚动的变化的数据列表 ### 特点 ``` 1. 可以指定首次初始化渲染的条数 2. 可以指定每次事件循环渲染的条数 3. 支持下拉刷新(不支持上拉刷新) ``` ### 属性 ``` 1. initialListSize: 初始化渲染的条数，一般大于首屏条数 2. pageSize:每次渲染的条数 3. renderScrollComponent: 返回的组件用来渲染list rows 4. scrollRenderAheadDistance:...
### 前言 去年最火热的技术莫过于 ReactJS 了，各种技术周刊头条。作为一个前端，自然也想尝尝鲜；另一方面，由于所在公司项目的性质，主要是做 hybrid app 开发，技术选型是 angular，ionic，最后是基于 Cordova 去打包。如果涉及到交互性强的应用，这种纯 hybrid 的开发方式自然是会存在一些性能上的问题；那如果开发一些新闻类型的应用，用ionic还是很不错的选择。出于以上两点：不得不去折腾下React Native了。下面的内容出自于2015年11月份在某大学做技术讨论的 [PPT](https://speakerdeck.com/chenbin92/qian-tan-qian-duan-yi-dong-kai-fa) (需自备梯子)演讲稿。 2015年移动开发似乎达到了一个新的高度，传统形式的 `hybrid app`，基于微信的 `h5` 单页应用，后起之秀的 `react-native`，原生的 `Android`，`iOS`开发...；技术选型太多，各应用商店 app 的数量更是如雨后春笋，据 ionic 的官网blog介绍，用 ionic 开发的 app...
#### [完整实例代码](https://github.com/chenbin92/React-native-example/tree/TabBarExample) 先来看看实现的效果图，可以看到底部是常见的一种tab切换效果，有选中效果，自定义的图标(非系统默认提供的图标)，可切换不同的视图.  ### 1. 安装 `react-native-vector-icons`，提供了3000+的矢量图标 > 3000 Customizable Icons for React Native with support for NavBar/TabBar, image source and full stying. ``` $ npm install react-native-vector-icons --save...
`Flexbox` 是 React Native 应用开发中必不可少的一部分，也是最常用最基础的内容，下面让我们一起去探索一下什么是flexbox布局： ### Flexbox 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性盒子布局"，是 CSS3 新增加的一个[布局模块](https://www.w3.org/TR/css3-flexbox/)；做过 web 前端开发的人员都清楚，传统的页面布局基于盒状模型，依赖 display属性 + position属性 + float属性。相反的，flexbox 提供了更加灵活的特性，可以简便、完整、响应式地实现各种页面布局。 ### 布局模型 flexbox布局由**伸缩容器**和**伸缩项目**组成。任何一个元素都可以指定为 flexbox 布局，其中设为 `display： flex`...
#### [完整示例代码](https://github.com/chenbin92/React-native-example/tree/react-native-swiper-landingPage-example) 先来看看下面实现的效果图，你会发现这是一个常见的应用程序启动时的滑动介绍效果(LandingPage)，以及滑动完成时出现注册登录按钮，引导用户注册登录，之后进入应用程序的首页，现在许多流行的应用程序如 `知乎`、`支付宝`、`叮叮` 等都有类似的功能  ### 安装 `react-native-swiper` react-native-swiper 是一款轮播组件，封装了不同风格的轮播效果，我们只需要使用 npm 来安装即可： ``` $ i react-native-swiper --save ``` ### 演示示例 安装成功后，需要确保组件能够正常使用，简单示例代码如下： ``` var Swiper = require('react-native-swiper') var swiper =...
``` 每个应用程序都希望能有一个吸引眼球，令人难忘的图标，它会出现在用户手机的主屏幕和 App Store上， 所以，设置一个好的 App Icon 会给用户第一眼视觉的享受，是至关重要的。下面的步骤让我们一起来 为你的 App 换上Icon: ```  ## 添加 App Icon ##### 1. 首先，你需要设计出一套符合 iOS 规格的 App Icon 尺寸， [ App Icon 和...
## 环境搭建 (iOS) 工欲善其事，必先利其器。整个示例代码都是以Mac OS X系统为基础的； #### React Native主要依赖的环境： - Mac OS X操作系统 - 推荐使用Xcode7.1或者更高版本 - 安装Node.js 5.0或者最新版本 - 建议使用Homebrew安装： watchman和flow #### 项目依赖的版本 ``` $ node -v => v5.1.1 $...