React-Native中一些常用组件的用法详解(一)
前言
本文为大家介绍一下React-Native中一些常用的组件,由于对ES6的语法并没有完全掌握,这里暂时用ES5和ES6混用的语法。
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);
最后效果:
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);
最后效果:
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按钮没有任何变化
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);
最后效果:
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);
最后效果:
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对我们的支持。