react-native 学习笔记

最新推荐文章于 2024-06-22 09:52:07 发布

hello_nine

最新推荐文章于 2024-06-22 09:52:07 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： rn 文章标签： flex

本文链接：https://blog.csdn.net/hello_nine/article/details/52737287

rn 专栏收录该内容

1 篇文章

订阅专栏

本文是关于React Native的学习笔记，主要探讨了布局属性，包括flex布局、flexDirection、alignItems、alignSelf、justifyContent、flexWrap以及ScrollView的属性应用。内容涵盖了如何通过这些属性实现组件的定位和排列，以及在不同场景下的使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.常见的属性:
1.flex:如果唯一父级是1,则代表占满整个栏目;如果有几个子级,那么会按照子集分配的flex数量来累计,根据flex的数量来等额划分
这里写图片描述
2.flexDirection: 属性 row(设置主轴为水平方向) column(默认,垂直方向)

3.alignItems 表示与主轴相对的轴的显示方向,例如主轴默认是纵轴,那么alignItems代表横轴(水平),可以设置flex-start(默认,左对齐) , center(水平居中) , flex-end(右对齐)

4.alignSelf 表示可以设置单独子级的方向

5.justifyContent 设置主轴的显示方向,flex-start(默认,上对齐) , flex-end(下对齐) , center(垂直居中) , space-between(上下对齐) , space-around(上下对齐,有空格,并非紧挨着上下边线 , 中间空格是左右的两倍)

space-between 注意,子级不能设置flex 否则无效

space-around

5.flexWrap : ‘wrap’设置文字自动换行,通常需要配合宽度来使用

6.keyboardType : 使用TextInput时点击的键盘显示形式,number-pad (iphone中键盘显示) , numeric(android中键盘显示)…keyboardType={'numeric'}
multiline={true}表示可以输入多行
secureTextEntry={true}表示输入密码,
value={'hello'}表示默认值,注:写了之后无法删除x
underlineColorAndroid={'color'}在安卓下设置下划线的颜色

名称	作用	值	平台
View支持的相关属性	一些基本属性	官网链接	iOS、Android
autoCapitalize	自动切换成大写	enum(‘none’,’sentences’,’words’,’characters’) none:不自动切换任何字符成大写；sentences:默认每个句子的首字母变成大写；words:每个字母的首字母变成大写；characters:每个字母全部变成大写	iOS、Android
autoCorrent	设置拼写自动修正功能，默认为开启(true)	bool	iOS、Android
autoFocus	设置是否默认获取到焦点，默认为关闭(false)，componentDidMount方法被调用之后才会获取焦点(componentDidMount是React组件被渲染之后React系统回调的方法)	bool	iOS、Android
defaultValue	给文本输入设置一个默认初始值	string	iOS、Android
editable	设置文本框是否可以编辑	bool	iOS、Android
keyboardType	键盘类型：用来选择默认弹出键盘的类型，例如指定numeric就是弹出数字键盘。	‘default’, ‘email-address’, ‘numeric’, ‘phone-pad’, ‘ascii-capable’, ‘numbers-and-punctuation’, ‘url’, ‘number-pad’, ‘name-phone-pad’, ‘decimal-pad’, ‘twitter’, ‘web-search’,鉴于平台的原因如下的值是所有平台都可以进行通用:default,numeric,email-address	iOS、Android
maxLength	限制文本输入框最大的输入字符长度	number	iOS、Android
multiline	设置可以输入多行文字，默认为false(表示无论文本输入多少，都是单行显示)	bool	iOS、Android
onBlur	监听方法，文本框失去焦点回调方法	function	iOS、Android
onChange	监听方法,文本框内容发生改变回调方法	function	iOS、Android
onChangeText	监听方法，文本框内容发生改变回调方法，该方法会进行传递文本内容 function iOS、Android
onEndEditing	监听方法，当文本结束文本输入回调方法	function	iOS、Android
onFocus	监听方法文本框获取到焦点回调方法	function	iOS、Android
onLayout	监听方法组价布局发生变化的时候调用，调用方法参数为 {nativeFunction:{x,y,width,height}}	function	iOS、Android
onSelectionChange	监听方法当Text input选中状态被改变时调用	function	iOS、Android
onSubmitEditing	监听方法，当编辑提交的时候回调方法。不过如果multiline={true}的时候，该属性就不生效	function	iOS、Android
placeholder	当文本输入框还没有任何输入的时候，默认显示信息，当有输入的时候该值会被清除 string iOS、Android
placeholderTextColor	设置placeholderText颜色	string	iOS、Android
returnKeyType	决定return键怎么显示	enum(‘done’, ‘go’, ‘next’, ‘search’, ‘send’, ‘none’, ‘previous’, ‘default’, ‘emergency-call’, ‘google’, ‘join’, ‘route’, ‘yahoo’)。双平台适用：done、go、next、search、send；Android：none、previous；iOS：default、emergency-call、google、join、route、yahoo	iOS、Android
secureTextEntry	设置是否为密码安全输入框	bool，默认为false	iOS、Android
selectTextOnFocus	如果为true，当获得焦点，自动选中所有文本	bool	iOS、Android
selectionColor	输入框文本的高亮颜色（iOS中包括光标）	string	iOS、Android
style	风格属性，可以参考Text组件风格	iOS、Android
value		string	iOS、Android
numberOfLines	设置TextInput的行数，multiline设置为true，并结合该属性能够满足多行的
	TextInput		number Android
returnKeyLabel	设置return键为文本组件，利用它替换returnKeyType	string	android
underlineColorAndroid	设置TextInput的下划线颜色	string	android
clearButtonMode	清除按钮模式,设置何时应该在TextInput右边出现清除按钮	enum(‘never’, ‘while-editing’, ‘unless-editing’, ‘always’)	iOS
clearTextOnFocus	如果为true，当编辑开始自动清除TextInput文本内容	bool	iOS
enablesReturnKeyAutomatically	如果为true，当没有输入文本键盘的return键自动失效，当输入文本键盘的return键自动生效，默认值是false	bool	iOS
keyboardAppearance	设置键盘的颜色	enum(‘default’, ‘light’, ‘dark’)	iOS
onKeyPress	当任何一个键被按时调用，被按的键的值作为一个实参传入function，在onChange被调用之前先执行	function	iOS
selectionState	请看DocumentSelectionState.js一些状态负责维持一个文档的选中信息（我也不懂什么意思，官网翻译的。）	DocumentSelectionState	iOS