![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React Native
学习笔记666
这个作者很懒,什么都没留下…
展开
-
新闻客户端02 - 完善TabBar
1.Main.jsimport React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View, TabBarIOS, NavigatorIOS} from 'react-native';// 引入外部的组件(此处注意是相当于了项目根目录)var Hom原创 2016-08-15 15:09:11 · 540 阅读 · 0 评论 -
React Native商城项目实战08 - 设置“More”界面cell
知识点 关于cell上的Switch开关自定义可复用的cell More/CommonCell.js:/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import { AppR原创 2016-08-22 16:39:23 · 1567 阅读 · 4 评论 -
React Native商城项目实战09 - 个人中心自定义cell
1.新建组件CommonMyCell.js /** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import { AppRegistry, StyleSheet, Tex原创 2016-08-23 15:42:40 · 1836 阅读 · 0 评论 -
Touchable系列组件
学习资料 博客:Touchable系列组件 TouchableHighlight、TouchableOpacity/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import { Ap原创 2016-08-11 09:49:27 · 1412 阅读 · 0 评论 -
React Native商城项目实战10 - 个人中心中间内容设置
1,新建一个MineMiddleView.js,专门用于构建中间的内容 /** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import { AppRegistry, Style原创 2016-08-24 08:55:48 · 1546 阅读 · 0 评论 -
React Native商城项目实战11 - 个人中心头部内容
1.创建MineHeaderView.js/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text,原创 2016-08-24 09:32:23 · 2996 阅读 · 0 评论 -
用scrollView实现轮播图效果
React Native常用组件之ScrollView http://reactnative.cn/docs/0.25/scrollview.html#content1.需要导入计时器类库 cd到项目根目录下执行: $ npm i react-timer-mixin --save 在项目中需要引入并注册: 引入: var TimerMixin = require('react-ti原创 2016-08-11 17:03:44 · 2292 阅读 · 0 评论 -
用scrollView实现轮播图效果2 - 定时器
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View, ScrollView, Im原创 2016-08-12 09:27:00 · 1655 阅读 · 1 评论 -
React Native商城项目实战12 - 首页头部内容
上图说明:HomeTopView为首页头部内容,HomeTopListView为HomeTopView子视图。1.HomeTopView.js/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';i原创 2016-08-24 15:13:11 · 1603 阅读 · 2 评论 -
最简单的ListView演练
学习资料: React Native常用组件之ListView 中文官网运行效果: 代码: /** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import { AppRegistr原创 2016-08-12 15:25:41 · 1088 阅读 · 0 评论 -
用ListView实现九宫格布局
相关技术点: 通常情况下,我们对ListView的操作是纵向的,如果是横向的,则需要设置ListView的contentContainerStyle属性,添加flexDirection:‘row’让多个ListView在同一行显示,而且通过flexWrap:’wrap’进行换行。运行效果图: 代码如下:/** * Sample React Native App * https原创 2016-08-12 22:32:05 · 3132 阅读 · 2 评论 -
React Native商城项目实战13 - 首页中间上部分内容
1.HomeMiddleView.js/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text,原创 2016-08-25 11:15:47 · 779 阅读 · 0 评论 -
React Native商城项目实战14 - 首页中间下部分
1.MiddleBottomView.js/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text,原创 2016-08-25 13:55:17 · 1777 阅读 · 0 评论 -
React Native商城项目实战15 - 首页购物中心
1.公共的标题栏组件TitleCommonCell.js/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import { AppRegistry, StyleSheet,原创 2016-08-26 10:03:12 · 5105 阅读 · 0 评论 -
ListView演练 - 带有组头的汽车品牌展示
技术点分析: 在React Native中,ScrollView组件可以使用 stickyHeaderIndices 轻松实现 sticky 效果;而使用ListView组件时,使用 stickyHeaderIndices 则不生效。 如何实现滚动时每个section header会吸顶? 在ListView中要实现 sticky ,需要使用 cloneWi原创 2016-08-15 10:51:26 · 1292 阅读 · 0 评论 -
TabBarIOS界面之间切换
知识点学习:React Native常用组件之TabBarIOS和TabBarIOS.Item组件1.代码/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import { AppReg原创 2016-08-15 13:11:45 · 2224 阅读 · 0 评论 -
TextInput组件练习 - QQLogin界面
关于TextInput组件详细资料,请查看:TextInput下面我们来写一个QQ登录界面1.首先我们来学习一下如何引入外部的组件? 在项目根目录下新建一个LoginView.js文件:/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Comp原创 2016-08-10 14:25:26 · 596 阅读 · 0 评论 -
Image组件的小练习 - 商品列表页
通过商品展示,总结前面所学的View,Text和Image组件,具体代码如下:/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import { AppRegistry, StyleSh原创 2016-08-09 17:15:18 · 507 阅读 · 0 评论 -
Flexbox布局的重要属性
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View} from 'react-nativ原创 2016-08-09 15:16:51 · 2862 阅读 · 0 评论 -
新闻客户端03 - 包装导航控制器
知识点: React Native常用组件之Navigator和NavigatorIOS1.核心代码<TabBarIOS.Item icon={require('image!tabbar_home')} title="首页" selected={this.state.selectedItem == 'home'} onPress={()=>{this.set原创 2016-08-15 15:22:30 · 915 阅读 · 0 评论 -
新闻客户端05 - 完善首页列表数据
Home.js:import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View, ListView, Image, TouchableOpacity} from 'react-native';// 导入本地json数据var Loc原创 2016-08-16 09:37:59 · 705 阅读 · 0 评论 -
新闻客户端06 - 完善ListView头部视图
1.我们之前已经用scrollView实现了轮播图效果 地址1,地址2 因为需要定时器,所以我们要cd到当前项目根目录下安装这个类库:npm i react-timer-mixin --save 2、Component/ScrollImage.jsimport React, { Component } from 'react';import { AppRegistry, St原创 2016-08-16 11:08:17 · 916 阅读 · 0 评论 -
新闻客户端07 - 新闻详情页
知识点 WebView第一种: WebView直接加载一个url来展示网页。 观察新闻数据,我们发现有一个3g网页的url{ "url_3w": "http://ent.163.com/16/0815/15/BUH64L0J00031H2L.html", "postid": "BUH64L0J00031H2L", "votecount": 49276,原创 2016-08-16 14:03:35 · 1387 阅读 · 0 评论 -
React Native商城项目实战16 - 购物中心详细页
逻辑分析: 首页(Home)加载的购物中心组件(ShopCenter),传递url数据; ShopCenter里根据url加载购物中心详细页组件(ShopCenterDetail), ShopCenterDetail中利用WebView展示。1.Home.js/** * Sample React Native App * https://github.com/facebook/react-原创 2016-08-29 16:55:44 · 5495 阅读 · 1 评论 -
React Native商城项目实战01 - 初始化设置
1.执行命令,生产一个工程$ react-native init BuyDemo2.导入图片资源 安卓:把文件夹放到/android/app/src/main/res/目录下,如图: iOS: Xcode打开工程,把图片拖动到Images.xcassets里3.根据实际需求,组织项目结构,目的是更加清晰 4.Main.js/** * Sample React Native App *原创 2016-08-19 17:05:14 · 1829 阅读 · 1 评论 -
React Native商城项目实战02 - 主要框架部分(tabBar)
回顾 前面我们已经了解了IOS下这2个组件的用法: React Native常用组件之TabBarIOS和TabBarIOS.Item组件 React Native常用组件之Navigator和NavigatorIOS1.安装插件,cd到项目根目录下执行: npm i react-native-tab-navigator --save 1.1阅读README.md可以了解该模块基本用法 2原创 2016-08-20 13:06:52 · 2934 阅读 · 3 评论 -
React Native商城项目实战03 - 包装Navigator
知识点 Navigator的基本用法 回顾前面已经学习过的NavigatorIOS1.在Home目录下新建首页详细页HomeDetail.js/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';原创 2016-08-20 15:14:15 · 1365 阅读 · 1 评论 -
配置React Native的开发环境
本文转载自:http://mp.weixin.qq.com/s?__biz=MzIxNjEzNjUzOQ==&mid=402020148&idx=2&sn=ccad14a9197c8dbc4700c40bb907e56c&scene=1&srcid=0808BT91kp5iX5xNRV0WuWrQ#rd一、环境需求 1.1 安装Homebrew Homebrew是OS X的套件(转载 2016-08-09 09:41:13 · 7207 阅读 · 2 评论 -
FlexBox布局初识 - 主轴和侧轴
CSS布局有“盒子模型”,依赖 display属性 , position属性, float属性。但对于那些特殊布局非常不方便,比如,垂直居中。一种全新的针对web和移动开发布局应运而生:Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。FlexBox布局大部分情况下是处理图中FlexItem在FlexContainer原创 2016-08-09 11:59:14 · 8489 阅读 · 0 评论 -
React Native商城项目实战04 - 封装TabNavigator.Item的创建
1.Main.js/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View,原创 2016-08-20 15:50:25 · 3045 阅读 · 0 评论 -
React Native商城项目实战05 - 设置首页的导航条
1.Home.js/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View,原创 2016-08-20 17:10:08 · 875 阅读 · 0 评论 -
React Native商城项目实战06 - 设置安卓中的启动页
1.Mian/目录下新建LaunchImage.js:/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import { AppRegistry, StyleSheet,原创 2016-08-20 20:44:56 · 981 阅读 · 0 评论 -
React Native商城项目实战07 - 设置“More”界面导航条
1.More/More.js/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, Vi原创 2016-08-20 21:15:02 · 1450 阅读 · 0 评论 -
新闻客户端01 - 初始化项目结构
1.在项目根目录新建Componet文件夹(专门用来放我们的自定义组件),里面新建Main.js、Home.js、Message.js、Mine.js、Find.js 2.修改index.ios.js和index.android.js,引用外部Main.js/** * Sample React Native App * https://github.com/facebook/react-nat原创 2016-08-15 14:19:55 · 595 阅读 · 0 评论