react-native
键盘舞者113
你的star就是我的动力,https://github.com/979451341
展开
-
React-native学习过程 七 flexbox伸缩项目属性
今天继续讲react-native的flexbox布局 这次讲的是flexbox的项目属性 (1) flexGrow 这是定义伸缩项目的放大比例,它的意思是因为布局很大,项目一般用不完,所以会有空余的地方,这个属性使来根据这个属性的值来分配空余的地方, 这个属性默认是0,使用例子如下: <View style={styles.container}> <Text原创 2017-04-07 09:33:04 · 1212 阅读 · 0 评论 -
React-native学习过程 五 登录界面
这次做一个登录界面 1. 显示图片,图片通过URL网上获取,并对其通过样式进行设定其大小和间距 <Image source={{uri: 'http://oss-hz.qianmi.com/qianmicom/u/cms/qmwww/201511/03102524l6ur.png'}}style={styles.logo}/> logo:{ width:160,原创 2017-04-05 22:46:49 · 1451 阅读 · 0 评论 -
React-native学习过程 四 ListView
添加ListView模块import { AppRegistry, Image, StyleSheet, Text, View, ListView,} from 'react-native';检查数据是否更新,并对不同情况做出不同反应 constructor(props) { super(props); this.state =原创 2017-04-05 11:21:45 · 1140 阅读 · 0 评论 -
React-native学习过程 三 通过网络获取数据
这次讲的是如何从网上获取数据,并显示出来 首先将获取对象的URL放在最上面var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';初始化数据constructor(props) { super(props); this.sta原创 2017-04-04 22:13:44 · 3412 阅读 · 2 评论 -
React-native学习过程 一 改变文字,添加图片
我这里是在Window的环境上做实验,并且是以android的方向写的,请注意。 还有就是结尾会贴出完整代码 首先我们需要编辑index.android.js文件,至于用什么网页编辑软件没有要求。 添加文字 首先创建一个数组存储数据,这个数组放在最上面var MOCKED_MOVIES_DATA = [ {title: 'Title', year: '2015', posters: {t原创 2017-04-04 11:20:59 · 1706 阅读 · 0 评论 -
React-native学习过程 二 改变图片和文字的排列
我们首先对React构造函数做出改动return ( <View style={styles.container}> <Image source={{uri: movie.posters.thumbnail}} style={styles.thumbnail} /> <View原创 2017-04-04 13:21:49 · 2073 阅读 · 0 评论 -
React 周期性改变字体透明度
这次的例子是一个透明度往复变淡的字符串 上代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <s原创 2017-04-04 19:57:18 · 2001 阅读 · 0 评论 -
React-native学习过程 九 Text组件综合应用
我这次使用Text组件做一个新闻页面 它分为三个部分头部标题,新闻列表,重要新闻, 而且我们队重要新闻部分添加点击回馈,就是调用alert显示新闻内容 这次写代码也是分三个模块export default class MyProject extends Component { render(){ var news = [ '1、刘慈欣《三体》获“雨果奖”为原创 2017-04-07 16:18:12 · 1283 阅读 · 0 评论 -
React-native学习过程 八 组件综合应用
我这次做一个综合应用View组件的例子,就是一个类似九宫格的图案,这是为了考验我们的布局能力 上代码:/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import { AppRegis原创 2017-04-07 11:36:22 · 1051 阅读 · 0 评论 -
React-native学习过程 六 flexbox伸缩容器属性
这次开始详细的讲一些很基础常见的属性,我会尽量详细的说清楚的 我先说一些基础知识 这上面有主轴和交叉轴,那是在屏幕默认的位置 1. Flexbox的伸缩容器属性 Flexbox是一种根据轴的顺序来排列控件的布局,他是通过flexDirection来实现的,这里先将容纳控件的属性。 (1) flexDirection 当flexDirection:’row’,控件水平排列,从左到右,原创 2017-04-06 21:30:49 · 1251 阅读 · 0 评论