react-native 常用组件的用法(一)
1.View组件
View是一个支持Flexbox布局、样式、一些触摸处理、和一些无障碍功能的容器,并且它可以放到其它的视图里,也可以有任意多个任意类型的子视图。
View的设计初衷是和StyleSheet搭配使用,这样可以使代码更清晰并且获得更高的性能。尽管内联样式也同样可以使用。
View的常用样式设置
- flex布局样式
- backgroundColor:背景颜色
- borderColor:边框颜色
- borderWidth:边框大小
- borderRadius:圆角
以手机端携程官网为示例
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
var ViewTest = React.createClass({
render () {
return (
<View style={styles.container}>
<View style={[styles.flex, styles.center]}>
<Text style={styles.white}>酒店</Text>
</View>
<View style={styles.flex}>
<View style={[styles.flex, styles.leftRightLine, styles.bottomLine, styles.center]}>
<Text style={styles.white}>海外酒店</Text>
</View>
<View style={[styles.flex, styles.leftRightLine, styles.center]}>
<Text style={styles.white}>特价酒店</Text>
</View>
</View>
<View style={styles.flex}>
<View style={[styles.flex, styles.bottomLine, styles.center]}>
<Text style={styles.white}>团购</Text>
</View>
<View style={[styles.flex, styles.center]}>
<Text style={styles.white}>民宿•客栈</Text>
</View>
</View>
</View>
)
}
});
var styles = StyleSheet.create({
container: {
margin: 10,
marginTop: 25,
height: 75,
flexDirection: "row",
backgroundColor: "#ff607c",
borderRadius: 5
},
flex: {
flex: 1
},
white: {
color: "white",
fontWeight: "900",
textShadowColor: "#ccc",
textShadowOffset: {width: 1, height: 1}
},
center: {
justifyContent: "center",
alignItems: "center"
},
leftRightLine: {
borderLeftWidth: 1,
borderRightWidth: 1,
borderColor: "white"
},
bottomLine: {
borderBottomWidth: 1,
borderColor: "white"
}
});
AppRegistry.registerComponent('HelloReact', () => ViewTest);
最后效果:
2.Text组件
一个用于显示文本的React组件,并且它也支持嵌套、样式,以及触摸处理。
常用特性
- onPress:手指触摸事件
- numberOfLines :显示多少行
常用样式设置
- color:字体颜色
- fontSize:字体大小
- fontWeight:字体加粗
- textAlign:对齐方式
以手机端网易新闻为示例
创建header.js和news.js两个文件
header.js具体代码如下:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
var Header = React.createClass({
render () {
return (
<View style={styles.container}>
<Text style={styles.font}>
<Text style={styles.red}>网易</Text>
<Text style={styles.white}>新闻</Text>
<Text>有态度</Text>
</Text>
</View>
)
}
});
var styles = StyleSheet.create({
container: {
marginTop: 25,
height: 44,
alignItems: "center",
justifyContent: "center",
borderBottomWidth: 1,
borderColor: "red"
},
font: {
fontSize: 25,
fontWeight: "bold"
},
red: {
color: "red"
},
white: {
color: "white",
backgroundColor: "red"
}
});
module.exports = Header;
news.js具体代码如下:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
var News = React.createClass({
render () {
var content = this.props.content;
var newList = [];
for (var i in content) {
var text = <Text key={i} style={styles.font}>{content[i]}</Text>;
newList.push(text);
}
return (
<View style={styles.container}>
<Text style={styles.title}>今日要闻</Text>
<View style={styles.container}>
{newList}
</View>
</View>
)
}
});
var styles = StyleSheet.create({
container: {
margin: 10
},
title: {
color: "red",
fontSize: 18,
fontWeight: "bold"
},
font: {
fontSize: 14,
lineHeight: 35,
fontWeight: "normal"
}
});
module.exports = News;
最后在index.ios.js文件中修改代码为:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
var content = [
'1、新华社用"罕见"为里皮点赞:他是国足的不二选择',
'2、干部动员拆迁遭袭身亡 是否同意拆除双方说法不',
'3、母亲欠债遭11人凌辱 儿子目睹后刺死1人被判无期',
'4、美媒:美轰炸机进入中国东海防空识别区遭中方警告'
];
var Header = require("./header");
var News = require("./news");
var NewsNote = React.createClass({
render () {
return (
<View>
<Header></Header>
<News content={content}></News>
</View>
)
}
});
AppRegistry.registerComponent('WorkA', () => NewsNote);
最后效果:
3.Touchable类组件
该组件用于封装视图,使其可以正确响应触摸操作
常用样式设置
- TouchableOpcity:透明触摸,点击时,组件会出现透明过度效果。
- TouchableHighlight:高亮触摸,点击时组件会出现高亮效果。
- TouchableWithoutFeedback:无反馈触摸,点击时候,组件无视觉变化。
示例
创建一个touchable.js的文件
里面代码为:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
TouchableHighlight,
TouchableWithoutFeedback
} from 'react-native';
var Touchable = React.createClass({
getInitialState () {
return {times: 0}
},
handlePress () {
var sum = this.state.times;
sum++;
this.setState({times: sum});
},
render () {
return (
<View>
<TouchableOpacity style={styles.btn} onPress={this.handlePress}>
<Text style={styles.text}>TouchableOpacity</Text>
</TouchableOpacity>
<TouchableHighlight underlayColor={"red"} onPress={this.handlePress} style={styles.btn}>
<Text style={styles.text}>TouchableHighlight</Text>
</TouchableHighlight>
<TouchableWithoutFeedback onPress={this.handlePress}>
<View style={[styles.btn, {width: 210}]}>
<Text style={styles.text}>TouchableWithoutFeedback</Text>
</View>
</TouchableWithoutFeedback>
<Text style={styles.text2}>点了{this.state.times}次</Text>
</View>
)
}
});
var styles = StyleSheet.create({
btn: {
marginTop: 25,
marginLeft: 20,
width: 150,
height: 30,
backgroundColor: "cyan",
borderRadius: 3,
justifyContent: "center",
alignItems: "center"
},
text: {
fontSize: 14,
fontWeight: "bold",
color: "blue"
},
text2: {
marginLeft: 25,
marginTop: 25,
fontSize: 16
}
});
module.exports = Touchable;
在index.ios.js文件中代码更改为:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
var Touchable = require("./touchable");
var TouchableTest = React.createClass({
render () {
return (
<View>
<Touchable></Touchable>
</View>
)
}
});
AppRegistry.registerComponent('useComponent', () => TouchableTest);
最后效果:
图片转换成gif图可能会失去一些效果,点击TouchableOpacity按钮会变透明,点击TouchableHighlight按钮的背景颜色会改变,点击TouchableWithoutFeedback按钮没有任何变化
4.TextInput组件
TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置,譬如自动完成、自动大小写、占位文字,以及多种不同的键盘类型(如纯数字键盘)等等。
常用属性
- placeholder占位符;
- value 输入框的值;
- password 是否密文输入;
- editable 输入框是否可编辑
- returnkeyType 键盘return键类型;
- onChange 当文本变化时候调用;
- onEndEditing 当结束编辑时调用;
- onSubmitEding 当结束编辑提交按钮时候调动;
- onChangeText:读取TextInput的用户输入;
示例
创建一个input.js的文件
里面代码为:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput
} from 'react-native';
var Input = React.createClass({
getInitialState () {
return {text: ""}
},
changeText (text) {
this.setState({text: text});
},
render () {
return (
<View style={styles.container}>
<TextInput returnKeyType={"done"} style={styles.input} placeholder={"请输入"} onChangeText={this.changeText}/>
<Text style={styles.text}>{this.state.text}</Text>
</View>
)
}
});
var styles = StyleSheet.create({
container: {
marginTop: 25
},
input: {
margin: 25,
height: 35,
borderWidth: 1,
borderColor: "red"
},
text: {
marginLeft: 35,
marginTop: 10,
fontSize: 16
}
});
module.exports = Input;
在index.ios.js文件中代码更改为:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
var Input = require("./input");
var InputTest = React.createClass({
render () {
return (
<View>
<Input/>
</View>
)
}
});
AppRegistry.registerComponent('useComponent', () => InputTest);
最后效果:
5.Image组件
一个用于显示多种不同类型图片的React组件,包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片(如相册)等。
静态图片加载
直接引入,代码如下: <Image source={require(‘./my-icon.png')} />
网络图片加载
注意:网络图片请求http请求的xcode需要做一个设置info.plist里的Allow Arbitrary Loads后面的no改成yes。
通过source指定图片地址,代码如下: <Image source=(注意这里要双花括号,因为特殊原因只能显示单花括号){uri: ‘https://facebook.github.io/react/img/logo_og.png'}(注意这里要双花括号,因为特殊原因只能显示单花括号)/>
示例
创建一个image.js的文件,在保存一张图片至本地,这里为1.png
里面代码为:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image
} from 'react-native';
var ImageTest = React.createClass({
render () {
return (
<View style={styles.container}>
<View style={styles.common}>
<Image source={{uri:"http://i1.sanwen8.cn/doc/1609/852-160912105Q2I6.jpg"}} style={styles.netImg}></Image>
</View>
<View style={styles.common}>
<Image source={require("./1.png")} style={styles.localImg}></Image>
</View>
</View>
)
}
});
var styles = StyleSheet.create({
container: {
margin: 10,
marginTop: 25,
alignItems: "center"
},
common: {
width: 280,
height: 250,
backgroundColor: "cyan",
justifyContent: "center",
alignItems: "center",
marginBottom: 10
},
netImg: {
width: 280,
height: 220
},
localImg: {
width: 200,
height: 200
}
});
module.exports = ImageTest;
在index.ios.js文件中代码更改为:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
var ImageComponent = require("./image");
var ImageTest = React.createClass({
render () {
return (
<View>
<ImageComponent/>
</View>
)
}
});
AppRegistry.registerComponent('useComponent', () => ImageTest);
最后效果:
react-native 常用组件的用法(一)的更多相关文章
- React Native常用组件在Android和IOS上的不同
React Native常用组件在Android和IOS上的不同 一.Text组件在两个平台上的不同表现 1.1 height与fontSize 1.1.1只指定font,不指定height 在这种情 ...
- React Native常用组件之ListView
1. ListView常用属性 ScrollView 相关属性样式全部继承 dataSource ListViewDataSource 设置ListView的数据源 initialListSize n ...
- React Native常用组件之ListView组件
学习iOS开发的同学应该都知道UITableView,几乎每个APP中都有它的存在,而且衍生出各种形态:那么同样,ListView就是在React Native中的tableView,而且更加简单和灵 ...
- react native 常用组件汇总
react-native-uploader //文件上传https://github.com/aroth/react-native-uploader jpush-react-native //官方版本 ...
- React Native常用组件之ScrollView
1. 两个要点 1.1 ScrollView必须有一个确定的高度才能正常工作 它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器(通过滚动操作) 通常有两种做法: 第一种: 直接给该S ...
- 一起来点React Native——常用组件之Touchable系列
在前面的登录界面中,我们发现所有的组件不会对用户的点击.触摸.拖拽做出合适的响应,这是十分不友好的.那么,在React Native中如何让视图对触发做出合适的响应呢? 一.高亮触摸 Touchab ...
- 一起来点React Native——常用组件之Image
一.前言 在开发中还有一个非常重要的组件Image,通过这个组件可以展示各种各样的图片,而且在React Native中该组件可以通过多种方式加载图片资源. 二.Image组件的基本用法 2.1 从当 ...
- React Native常用组件之TabBarIOS、TabBarIOS.Item组件、Navigator组件、NavigatorIOS组件、React Navigation第三方
以下内容为老版本React Native,faceBook已经有了新的导航组件,请移步其他博客参考>>[我是传送门] 参考资料:React Navigation react-native ...
- React Native常用组件之ScrollView组件
一.前言 从iOS开发的经验来看,scrollView无疑是移动开发中很重要的一个组件,比如后面会学到的ListView就是继承自它.那么,在开发中比如:焦点图.引导页等地方都有其的影子,那接下来我们 ...
- React Native常用组件Image使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
随机推荐
- gdb 查看变量~p长串末尾省略号, 一个页面显示不完
# MQClientAPIImpl::getTopicRouteInfoFromNameServer () at MQClientAPIImpl.cpp: # # # # # # # # # , ar ...
- 安装ubuntu配置ssh
vmware安装ubuntu后,必须配置网卡,重新设置MAC,否则无法连接网络(具体方法百度)NAT直连模式xshell连接时host为ifconfig显示的IP地址,不需要设置端口转发,端口还是22 ...
- (二十三)深入了解epoll (转)
一. 介绍Epoll 是一种高效的管理socket的模型,相对于select和poll来说具有更高的效率和易用性.传统的select以及poll的效率会因为 socket数量的线形递增而导致呈二次乃至 ...
- 【排序算法】java实现
1.冒泡排序 最简单的排序实现,冒泡排序,是一种交换排序,它的基本思想是:两两比较相邻记录的关键字,如果反序则交换,直到没有反序的记录为止. //冒泡排序 private int[] bubbleSo ...
- 基于UDP高性能传输协议UDT doc翻译(一)
原文转自:http://hi.baidu.com/doodlezone/item/74a203155efe26dbbf9042dd UDT文档阅读理解 一. 概述 ...
- Selenium2+python自动化19-单选框和复选框(radiobox、checkbox)【转载】
本篇主要介绍单选框和复选框的操作 一.认识单选框和复选框 1.先认清楚单选框和复选框长什么样 2.各位小伙伴看清楚哦,上面的单选框是圆的:下图复选框是方的,这个是业界的标准,要是开发小伙伴把图标弄错了 ...
- Android应用开发之使用Socket进行大文件断点上传续传
http://www.linuxidc.com/Linux/2012-03/55567.htm http://blog.csdn.net/shimiso/article/details/8529633 ...
- (11)C#值类型和引用类型,堆和栈,ref和out,装箱和拆箱
一.值类型和引用类型定义 以内存中的存在方式可以把变量分成两大类型,值类型和引用类型. 值类型:系统只占用一块内存,数据直接存储在内存里. 引用类型:系统占用两块内存,一块存放地址,另一块存放实际数据 ...
- codeforces-540C
题目连接:http://codeforces.com/problemset/problem/540/C C. Ice Cave time limit per test 2 seconds memory ...
- CF978C Letters【前缀和+二分查找/几房几号】
[链接]:CF978C [分析]:在前缀和数组种二分找到>=询问数的位置,根据位置就好操作了 [代码]: #include<bits/stdc++.h> using namespac ...