ReactNative之基本组件
ReactNative之基本组件
ReactNaive相关文章
1. React Native 中文网
2. GitHub相关代码地址
3. ReactNaive之CSS和Flex布局
4. ReactNative之基本组件
5. React Naive之ScrollView和ListView
6. React Native之导航组件NavigatorIOS和Navigator
7. ReactNative之TabBariOS和TabNavigator
注: 本文主要总结的是ReactNative的一些简单语法, 大部分内容总结自袁大神的文章
这里主要简单介绍以下几个控件:
View
Text
Button
TextInput
Image
一. View
- RN中的View组件类似于iOS中的UIView
- 一般常用于容器,往里面添加子控件,任何子组件都可以,View里面也可以在放View.
- 可设置样式: 背景颜色, 宽高等属性
- 没有点击事件,不能监听点击
- 如需要添加监听事件, 这里需要用到
TouchableOpacity
组件
二. TouchableOpacity
TouchableOpacity
点击控件- 如果想让一个没有点击事件的组件,能点击,就需要在外层包装一个
TouchableOpacity
,这个View,就能点击了。 - 注意:
TouchableOpacity
默认点击区域,就是所有子控件的区域,因为默认一个组件的尺寸由子控件绝对,因此TouchableOpacity
也是一样
- 如果想让一个没有点击事件的组件,能点击,就需要在外层包装一个
1. activeOpacity
属性
activeOpacity
: 不透明度- 一个View,被
TouchableOpacity
包装后,点击这个View
,就会有透明效果,这个效果可以通过activeOpacity
属性调整 - 取值: 0~1,1表示不透明,点击就没透明效果了。
- 一个View,被
- 使用示例:
<TouchableOpacity activeOpacity={0.7}><View style={styles.junViewStyle}></View>
</TouchableOpacity>
复制代码
2. disabled属性
- 如果设为true,则禁止此组件的一切交互
- 通过disabled,可以控制一个被
TouchableOpacity
包装的组件什么时候能点击。
3. 监听的几种手势
onLongPress function :长按的时候调用onPress function :点击的时候调用onPressIn function :手指按下的时候调用onPressOut function :手指抬起的时候调用
复制代码
需要注意的是:
onPress
与onPressIn
,onPressOut
,有冲突,不要同时实现
- 代码示例:
<TouchableOpacity activeOpacity={0.7}onPress={()=>{alert('点击')}}onLongPress={()=>{alert('长按')}}><View style={styles.junViewStyle}></View></TouchableOpacity>复制代码
三. Text
Text: 用于展示一段文字
1. 属性介绍
adjustsFontSizeToFit
: 指定字体是否随着给定样式的限制而自动缩放(默认false), 为true时: 会自动改变字体大小allowFontScaling
: 控制字体是否要根据系统的“字体大小”辅助选项来进行缩放。minimumFontScale
: 当adjustsFontSizeToFit开启时,指定最小的缩放比(即不能低于这个值)。可设定的值为0.01 - 1.0numberOfLines
:最大行数,超出最大行数,就不会完全显示,超出部分显示...selectable
:决定用户是否可以长按选择文本,以便复制和粘贴,默认falsesuppressHighlighting
: 默认情况下,文本被按下时会有一个灰色的阴影,如果想取消就设置为trueonPress
: 监听文本点击的操作onLongPress
: 当文本被长按以后调用此回调函数
2. 常用样式属性
color: 'yellow' //字体颜色
fontSize: 20, //字体大小
fontStyle: 'italic' //字体样式('normal': 正常字体, 'italic': 斜体)fontWeight:'bold', //指定字体的粗细
//大多数字体都支持'normal'和'bold'值。并非所有字体都支持所有的数字值。如果某个值不支持,则会自动选择最接近的值
//enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')lineHeight:50, //字体的高度(如字体需要垂直居中, 可设置与控件的高度相同即可)
textAlign:'center' //文字排列方式('auto', 'left', 'right', 'center', 'justify'(iOS支持))
复制代码
- 示例使用
<View style={styles.mainStyle}><Text style={styles.textStyle}numberOfLines={1}selectable={true}adjustsFontSizeToFit={true}minimumFontScale={0.5}>我是iOS开发工程师</Text></View>复制代码
四. Button
- Button:按钮,当一个文字想要点击效果,可以使用按钮
- 注意:Button没有样式,设置样式无效,最大的弊端,开发中一般不使用,一般自定义按钮,自己包装一个Text用于按钮.
- 常用属性
title='Button' //按钮文字
color="green" //按钮文字颜色
onPress={()=>{ //点击事件alert('点击了Button')
}}
disabled={true} //是否允许点击, 为true时不可点击
复制代码
- 代码示例
<View style={styles.mainStyle}><Buttontitle='Button'color="green"onPress={()=>{alert('点击了Button')}}disabled={true}/></View>复制代码
五. TextInput
TextInput
: 文本输入框, 支持样式设置TextInput
默认没有边框,需要自己添加borderWidthTextInput
是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置,譬如自动完成、自动大小写、占位文字,以及多种不同的键盘类型(如纯数字键盘)等等。
1. 常用属性介绍
placeholder='请输入账号' //占位文字
placeholderTextColor='#e1e1e1' //占位字符串显示的文字颜色selectionColor='green' //设置光标颜色
caretHidden={true} //如果为true,则隐藏光标。默认值为falseautoFocus={true} //自动获取焦点,如果为true,在componentDidMount后会获得焦点。默认值为falseblurOnSubmit={true} //点击键盘,右下角return,或者按回车的时候,是否自动退出键盘,true:是。注意:键盘必须是英文输入键盘,数字键盘无效.editable={false} //文本框是否可以编辑,默认值为true,如果为false,文本框是不可编辑的
secureTextEntry={true} //是否是密文效果,注意:多行无效果secureTextEntry={false} //是否是多行输入框,默认文本输入框只能一行,true,就能多行输入
maxLength={15} //最大字符数,显示输入文本长度clearTextOnFocus={true} //每次重新输入文本框,是否清空之前的文本
enablesReturnKeyAutomatically={true} //如果为true,键盘会在文本框内没有文字的时候禁用确认按钮。默认值为falseautoCorrect={true} //如果为false,会关闭拼写自动修正。默认值是true。复制代码
autoCapitalize
: 控制TextInput是否要自动将特定字符切换为大写enum('none', 'sentences', 'words', 'characters')
characters
: 所有的字符。words
: 每个单词的第一个字符。sentences
: 每句话的第一个字符(默认)。none
: 不自动切换任何字符为大写。
键盘类型
keyboardType
keyboardType='number-pad'
default
: 默认键盘numeric
: 带有小数点的数字键盘email-address
: 有@符的字母键盘ascii-capable
: 纯字母键盘numbers-and-punctuation
url
number-pad
phone-pad
name-phone-pad
decimal-pad
twitter
web-search
returnKeyType: 决定键盘右下角按钮显示的内容
enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo')
- clearButtonMode: 是否要在文本框右侧显示“清除”按钮
never
: 不显示while-editing
: 编辑的时候显示always
unless-editing
2. 常用的监听事件
onBlur function
//当文本框失去焦点的时候调用此回调函数。onChange function
//当文本框内容变化时调用此回调函数。onChangeText function
//当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递。onEndEditing function
//当文本输入结束后调用此回调函数。onFocus function
//当文本框获得焦点的时候调用此回调函数。onLayout function
//当组件挂载或者布局变化的时候调用,参数为{x, y, width, height}。onScroll function
//在内容滚动时持续调用,传回参数的格式形如{ nativeEvent: { contentOffset: { x, y } } }。 也可能包含其他和滚动事件相关的参数onSelectionChange function
//长按选择文本时,选择范围变化时调用此函数,传回参数的格式形如 { nativeEvent: { selection: { start, end } } }。onSubmitEditing function
//此回调函数当软键盘的确定/提交按钮被按下的时候调用此函数。如果multiline={true},此函数不可用。onKeyPress function
//当一个键被按下的时候调用此回调。传递给回调函数的参数为{ nativeEvent: { key: keyValue } },其中keyValue即为被按下的键。会在onChange之前调用。复制代码
3. 方法
isFocused(): boolean
//返回值表明当前输入框是否获得了焦点。clear()
//清空输入框的内容。
复制代码
六. Image
- Image:用于加载图片
- 图片可以是本地图片也可以是网络中的图片
1. 加载图片的方式
- 首先看一下图片的三种存放方式
- 图片存放到RN项目中
- 图片存放到iOS项目中
- 图片存放到安卓项目中
如何加载图片
- RN中加载资源:require(文件路径),用于加载RN中的资源,不管是图片,还是json都是一样的
- uri:指定一个资源路径,就会自动加载
- uri加载注意:通过uri加载资源,必须设置图片尺寸,否则不显示
- 如果网络加载http图片,iOS默认不支持,需要在info.plist中做配置
各种图片加载方式
<View style={styles.mainStyle}>{/*组件*/}<Text>1. 加载RN项目中的资源</Text><Imagestyle={styles.imageStyle}source={require('./BenzImage/Benz-GLA1.jpg')}/><Text>2. 加载iOS项目中的资源</Text><Imagestyle={styles.imageStyle}source={{uri: 'Benz-GLA2'}}/><Text>3. 加载https网络资源</Text><Imagestyle={styles.imageStyle}source={{uri: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513422273696&di=4d6b5ad6af91e9dfc5df8dbcdc068ed6&imgtype=0&src=http%3A%2F%2Fimg6.taoche.cn%2F1b%2F021701pc9d.jpg'}}/><Text>4. 加载http网络资源</Text><Imagestyle={styles.imageStyle}source={{uri: 'http://upload-images.jianshu.io/upload_images/4122543-ae133247aa24204e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/620'}}/></View>复制代码
2. 相关属性介绍
source
: 设置Image图片资源source={{uri: 'Benz-GLA2'}}
blurRadius
: 设置图片模糊状态blurRadius={10}
- 值越大,模糊状态越明显
resizeMode
: 决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小resizeMode='cover'
cover
: 在保持图片宽高比的前提下缩放图片,直到宽度和高度都大于等于容器视图的尺寸(如果容器有padding内衬的话,则相应减去)- 译注:这样图片完全覆盖甚至超出容器,容器中不留任何空白。
contain
: 在保持图片宽高比的前提下缩放图片,直到宽度和高度都小于等于容器视图的尺寸(如果容器有padding
内衬的话,则相应减去)- 译注:这样图片完全被包裹在容器中,容器中可能留有空白
stretch
: 拉伸图片且不维持宽高比,直到宽高都刚好填满容器。repeat
: 重复平铺图片直到填满容器。图片会维持原始尺寸。仅iOS可用。center
: 居中不拉伸
defaultSource
: 在读取图片时默认显示的加载提示图片defaultSource={{uri: 'Benz-GLA2', scale: 1.0}}
uri
: 是一个表示图片的资源标识的字符串,它可以是一个http地址或是一个本地文件路径(使用require
(相对路径)来引用)。width, height
: 如果你知道图片的尺寸,那么可以在这里指定。这一尺寸会被用作<Image/>
组件的默认尺寸。scale
: 图片的缩放系数。默认是1.0,意味着每一个图片像素都对应一个设备独立像素(DIP)。number
: 本地图片引用语法require('./image.jpg')
所返回的内部资源id
3. 监听图片加载方法
onLayout function
//当元素挂载或者布局改变的时候调用,参数为:{nativeEvent: {layout: {x, y, width, height}}}.onLoad function
//加载成功完成时调用此回调函数。onLoadStart function
//加载开始时调用onLoadEnd function
//加载结束后,不论成功还是失败,调用此回调函数。onError function
//当加载错误的时候调用此回调函数,参数为{nativeEvent: {error}}onPartialLoad function
//如果图片本身支持逐步加载,则逐步加载的过程中会调用此方法。“逐步加载”的具体定义与具体的标准和实现有关。onProgress function
//在加载过程中不断调用,参数为{nativeEvent: {loaded, total}}
复制代码
4. Image类方法
static getSize(uri: string, success: (width: number, height: number) => void, failure: (error: any) => void)
复制代码
- 一般在
componentDidMount
调用,先获取图片尺寸,然后在设置图片尺寸。 - 在显示图片前获取图片的宽高(以像素为单位)。如果图片地址不正确或下载失败,此方法也会失败。
- 要获取图片的尺寸,首先需要加载或下载图片(同时会被缓存起来)。
- 这意味着理论上你可以用这个方法来预加载图片,虽然此方法并没有针对这一用法进行优化,而且将来可能会换一些实现方案使得并不需要完整下载图片即可获取尺寸。
- 所以更好的预加载方案是使用下面那个专门的预加载方法。
static prefetch(url: string)
//预加载一个远程图片(将其下载到本地磁盘缓存)。
复制代码
5. 示例代码
export default class App extends Component<{}> {constructor(props){super(props)this.state = {wid: 100,hei: 100}}componentDidMount() {Image.getSize('http://upload-images.jianshu.io/upload_images/4122543-ae133247aa24204e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/620', (width, height)=>{this.setState({wid:width,hei:height})}, (error)=>{alert(error)})}// 当一个组件要显示的时候,就会自动调用render,渲染组件//render() {return (<View style={styles.mainStyle}><Text>加载iOS项目中的资源</Text><Imagestyle={[styles.imageStyle, {width: this.state.wid, height: this.state.hei}]}source={{uri: 'http://upload-images.jianshu.io/upload_images/4122543-ae133247aa24204e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/620'}}blurRadius={0}resizeMode='contain'// defaultSource={{uri: 'Benz-GLA2', scale: 1.0}}onLoad={()=>{console.log("图片加载完成")}}onLoadStart={()=>{console.log('图片开始加载')}}onLoadEnd={()=>{console.log('图片加载结束')}}onProgress={(progress)=>{console.log(progress.nativeEvent.total)console.log(progress.nativeEvent.loaded)}}onError={()=>{alert('图片加载错误')}}/></View>)}
}// 4.样式表 组件外观 尺寸,颜色
const styles = StyleSheet.create({mainStyle:{flex:1,backgroundColor: 'white',justifyContent:'center',alignItems:'center'},imageStyle:{width:150,height:150,backgroundColor:'yellow'}
});复制代码
参考文献:
1. ReactNative之基本组件(七)
2. React Native 中文网
ReactNative之基本组件相关推荐
- react-native新导航组件react-navigation详解
react-navigation react-navigation 是今年1月份新出的一款react-native导航组件, 才几个月github就三千多star, 半官方身份, fb推荐使用, 据称 ...
- ReactNative的基本组件的认识
通过官网的react-native init myProject,并打开Android Studio的手机模拟器进行调试 下面的代码使用了 Text .Image.View.TextInput和的re ...
- React-Native的TextInput组件的设置以及获取输入框的内容
大家下午好,自打过了个年啊,对于学习松懈了不少,得麻利的补补课了,这两天在学习React-Native的内容,发现RN的input框和原生input有些区别,特意写下来供小伙伴们参考啊,哈哈哈~ 众所 ...
- react-native播放视频组件 react-native-video的用法
react-native-video 是一个播放视频的开源组件, 它的用法很简单. 1.安装 依次执行下面两个命令, npm i -S react-native-video react-native ...
- ReactNative 原生UI组件 桥接原生 Android
React Native已经封装了大部分最常见的组件,譬如ScrollView和TextInput,但不可能封装全部组件.而且,说不定你曾经为自己以前的App还封装过一些组件,React Native ...
- react-native系列(9)组件篇:最优列表显示方案FlatList和SectionList
FlatList列表 FlatList是一个高性能的列表组件.原理是:只负责渲染当前可见的列表项,对于不可见的项将不会渲染因为可见的项总是有限的,当一个项被划出屏幕后,被滑出项的容器将会成为新滑入的项 ...
- ReactNative之Image组件自适应高度,图片自适应大小
因为在现在0.50包括之前的ReactNative版本,Image组件必须要设置宽高才能显示.所以在图片宽高不确定的情况下,如何来让图片自适应 屏幕高度呢? 需求原因:因为做商城详情页面的图片长短不一 ...
- react-native系列(6)组件篇: ScrollView滚屏及滚屏加载
ScrollView是RN中的一个滚动视图组件,它必须有一个确定的高度才能正常工作,因为在应用时往往会把将一系列不确定高度的子组件装进一个确定高度的容器.关于滚动视图高度这一点,不建议直接在样式中设置 ...
- ReactNative简介、开发环境、调试、常用组件、useState状态、FlatList组件、SectionList组件、Platform 模块、定义样式、图片组件、触摸事件、打包apk发布版
ReactNative简介: ReactNative是基于React语法来进行开发移动app的框架: ReactNative中提供了移动端专用的一些组件,我们要使用ReactNative固有的组件代替 ...
- ReactNative 踩坑之 iOS 原生组件
iOS 中Undefined symbols for architecture x86_64 在原生 iOS 开发中,这个错误信息,应该或多或少的会碰到过: Undefined symbols for ...
最新文章
- python3 编译优化 --enable-shared --enable-optimizations
- tensorflow随笔-constant
- 预训练图像处理Transformer:刷榜多项底层视觉任务
- html人物动画效果图,9款用HTML5/CSS3制作的动物、人物动画
- WebView详解与简单实现Android与H5互调
- JavaScript 精度问题以及JavaScript 浮点数陷阱及解决方案
- 修改 javascript 中alert样式
- [数学建模] TOPSIS法(考虑权重和不考虑权重)--评价类问题
- 微型计算机原理第三版 课后答案 王忠民
- 怎么安装sqlserver2000数据库出现挂起提示
- android神器v2ex,这5个堪称神器的APP,用了让你爱不释手!
- python中dot函数_np.dot()函数的用法详解
- nvidia jetson agx Xavier can 开机自动运行脚本
- 基于Matlab人脸识别签到系统(GUI界面)
- iceberg-flink 十:flink任务后台关闭,并查找savepoint。
- 决策树算法的总结归纳
- 计算机三级网络app,App Store 上的“计算机三级网络技术题库”
- conda安装tensorflow和conda常用命令
- (C++实例)汽车类vehicle、小车类car、卡车类truck操作
- 搜狐博客悄悄停止运营
热门文章
- wdcp安装中的小知识
- 自动化测试报告 html模板,自动化测试报告模板.docx
- 架构运维篇(二):Centos7/Linux安装部署Tomcat环境
- pandas读取csv文件数据并对指定字段使用matplotlib画折线图
- iOS 网络图片转为UIImage 和微信分享时缩略图片的压缩
- abp vnext修改密码策略
- PHP exec() has been disabled for security reasons
- 举例说明指针的运算方法c语言,C语言中指针的使用方法
- ecg 幅度_用ECG和PPG测血压靠谱吗?有什么比较好的算法?
- 梦笔记2022-2-1