react native
天若子
这个作者很懒,什么都没留下…
展开
-
ReactNative学习一
1.安装Git下载Git,记得把git.exe的路径写入系统环境变量,因为在执行react-native init命名时会调用git去下载react-native的源码。2.安装Node.js到官网下载最新版的安装包安装即可。npm(node package manager)是随着node.js就安装好的,为了加速安装其他的package,在cmd里输入以下命令:npm c转载 2016-04-01 15:22:28 · 492 阅读 · 0 评论 -
ReactNative学习十七-UIExplorer例子运行
1.React Native项目官方地址:https://github.com/facebook/react-native命令:git clone https://github.com/facebook/react-native.git2.添加Node依赖模块:该命令行需要切到react-native项目中,主要运行如下命令1cd rea转载 2016-04-13 22:51:27 · 752 阅读 · 0 评论 -
ReactNative学习十六-View属性及Style
1.View属性方法介绍View属性方法介绍如下:序号名称属性Or方法类型说明1accessibilityLabel属性string 2accessible属性bool当为true时,表示该元素是可以进行访问,默认情况下所有可触摸的元素控件都是可以访问的转载 2016-04-07 19:54:35 · 2779 阅读 · 0 评论 -
ReactNative学习十五-横竖布局及右上角圆点
1.效果图2.源代码'use strict';import React, { Component, View, Image, Text, Dimensions, StyleSheet} from 'react-native';var deviceWidth = Dimensions.get('window').width;转载 2016-04-07 19:05:38 · 3179 阅读 · 0 评论 -
ReactNative学习十四-再次弹性盒(Flexbox)
属性列表(Flexbox)alignItems enum('flex-start', 'flex-end', 'center', 'stretch') alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch') borderBottomWidth number borderLeftWidth numb转载 2016-04-07 15:46:22 · 474 阅读 · 0 评论 -
ReactNative学习十三-Props和State
props每一个组件都有可变与不可变的属性,props是不可变属性,当props改变时,组件的绘制方法不会被调用。属性多的时候,可以传递一个对象,语法为{...xx},这是es6的新特性。statesstates是组件的可变属性,states的改变会触发组件的render函数,react与其他mvvm框架的最大的不同点就是,react 组件可以想象成一个状态机,状态的改转载 2016-04-07 15:11:14 · 1271 阅读 · 0 评论 -
ReactNative学习十二-React-Native-Viewpager
1.项目地址https://github.com/race604/react-native-viewpager2.UsageRun npm install react-native-viewpager --saveCode like this:var ViewPager = require('react-native-viewpager');<ViewPage转载 2016-04-06 19:21:44 · 13137 阅读 · 3 评论 -
ReactNative学习十一-手写Item布局
1.效果图,此为手写布局,非GridView.2.代码'use strict';import React, { Component, View, Text, Image, TouchableHighlight, PropTypes, StyleSheet} from 'react-native';export defau转载 2016-04-06 15:33:11 · 1250 阅读 · 0 评论 -
ReactNative学习十-Tab-Navigator
1.github地址https://github.com/exponentjs/react-native-tab-navigator2.package.json配置"dependencies": { "react-native-tab-navigator": "^0.2.15", }3.说明A tab bar that switches betw转载 2016-04-06 10:47:56 · 2556 阅读 · 0 评论 -
ReactNative学习九-登录页面
1.效果图2.代码/** * 登录页面 *///初始化类import React, { AppRegistry, Component, StyleSheet, Text, Image, View, TextInput} from 'react-native';//初始化类export default转载 2016-04-05 19:40:06 · 2165 阅读 · 0 评论 -
ReactNative学习四-版本更新
1.React Native的版本,命令行输入如下命令:react-native --version2.React Native版本更新:npm update -g react-native-cli3.升级/降级,例如:npm install --save react-native@0.18 再运行获取最新的代码: react-native upgrade转载 2016-04-01 16:58:59 · 368 阅读 · 0 评论 -
ReactNative学习八-搜索栏的基本布局
1.布局2.代码如下/*** 扫码框*/'use strict';import React, {Component,Image,TextInput,View,Platform,StyleSheet} from 'react-native';//export 因为要在其他类中使用export default clas转载 2016-04-05 19:21:51 · 6457 阅读 · 0 评论 -
ReactNative学习六-Flex布局
一、Flex布局是什么?Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{ display: flex;}行内元素也可以使用Flex布局。.box{ display: inline-flex;}Webkit内核的浏览器,必须加上-we转载 2016-04-04 22:34:21 · 759 阅读 · 0 评论 -
ReactNative学习五-Atom安装
1.Atom下载地址:https://atom.io/2.安装Atom插件Nuclide直接打开Atom软件,点击Atom->Preferences打开Setting,然后点击install,输入nuclide-installer gyp info it worked if it ends with okgyp info using node-gyp@0.12.2gyp i转载 2016-04-04 21:12:37 · 1195 阅读 · 0 评论 -
ReactNative学习三
1.android react-native学习网站http://www.lcode.org/ 江清清技术专栏(棒)http://reactnative.cn/ React Native 中文网2.开发工具:Atom3.index.android.js中:React.AppRegistry.registerComponent('TestHello', () =转载 2016-04-01 16:30:48 · 464 阅读 · 0 评论 -
ReactNative学习二
1.cd C:\Users\用户名\Desktop\react-native\react-native-master\react-native-clinpm install -g2.React-native本地安装路径:C:\Users\用户名\AppData\Roaming\npm\node_modules\react-native-cli3.安卓运行:cd C:\U转载 2016-04-01 15:32:35 · 619 阅读 · 0 评论 -
ReactNative学习十八-Text/Image属性与风格
1.Text属性numberOfLines(number):设置文本行数onPress(function):点击触发方法2.Text样式1.继承可以使用View组件的所有Style(具体查看http://facebook.github.io/react-native/docs/view.html#style)2.color:字体颜色3.fontFamily 字体转载 2016-04-13 23:48:42 · 849 阅读 · 0 评论