React |
您所在的位置：网站首页 › 250用英文怎么写 › React |
React
|
React-Native中一些常用组件的用法详解(一)
发布时间：2020-10-20 09:00:27
来源：脚本之家
阅读：120
作者：lymooz
栏目：移动开发
前言 本文为大家介绍一下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 ( 酒店 海外酒店 特价酒店 团购 民宿•客栈 ) } }); 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 ( 网易 新闻 有态度 ) } }); 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 = {content[i]}; newList.push(text); } return ( 今日要闻 {newList} ) } }); 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 ( ) } }); 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 ( TouchableOpacity TouchableHighlight TouchableWithoutFeedback 点了{this.state.times}次 ) } }); 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 ( ) } }); 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 ( {this.state.text} ) } }); 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 ( ) } }); AppRegistry.registerComponent('useComponent', () => InputTest);最后效果：
Image组件 一个用于显示多种不同类型图片的React组件，包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片（如相册）等。 静态图片加载 直接引入，代码如下： 示例 创建一个image.js的文件，在保存一张图片至本地，这里为1.png 里面代码为： import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image } from 'react-native'; var ImageTest = React.createClass({ render () { return ( ) } }); 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 ( ) } }); AppRegistry.registerComponent('useComponent', () => ImageTest);最后效果：
总结 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对亿速云的支持。 免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：[email protected]进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。 react-native 常用组件 用法 上一篇新闻：利用Kotlin如何实现Android开发中的Parcelable详解 下一篇新闻：Android图片等比例缩放和填充屏幕效果
10000元红包免费领
红包可用于（云服务器、高防服务器、裸金属服务器、高防IP、云数据库、CDN加速）购买和续费 猜你喜欢 公众号有什么用 公众号能不能转移主体 如何修改微信注册名字 微信公众号证明资料有哪些 微信开发之微信图片为什么会保存失败 互联网中微信里设为星标朋友是什么意思 电脑关机后电脑端的微信是不是就下线了 如何解决微信传文件大于100M无法发送的问题 公众号的入门知识点 微信公众号的服务号和订阅号有哪些区别 |
【本文地址】
今日新闻 |
推荐新闻 |