React Native之Flexbox布局和监测文本输入onChangeText

1   Flexbox布局

1) flexDirection
   可以决定布局的主轴,子元素是应该沿着水平轴(row)方向排列,还是沿着竖直轴(column)方向排列
2) justifyContent
   决定其子元素沿着次轴(与主轴垂直的轴,比如若主轴方向为row,则次轴方向为column)的排列方式
   有flex-start、center、flex-end、space-around、space-between以及space-evenly
3) alignItems
   子元素沿着次轴(与主轴垂直的轴,比如若主轴方向为row,则次轴方向为column)的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布,可选项有:flex-start、center、flex-end以及stretch,这里strech是延伸的意思

 

 

 

2 简单代码测试

  render() {return (<View style={{flex: 1,flexDirection: 'column',justifyContent: 'center',alignItems: 'stretch',}}><View style={{height: 50, backgroundColor: 'powderblue'}} /><View style={{height: 50, backgroundColor: 'skyblue'}} /><View style={{height: 100, backgroundColor: 'steelblue'}} /></View>);}

效果如下

  render() {let pic = {uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'};        return (<View style={{flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'flex-end'}}><View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} /><View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} /><View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} /></View>);}

效果如下

  render() {return (<View style={{padding: 10}}><TextInput style={{height: 40}} placeholder="hello" onChangeText={(text) => this.setState({textValue:text})} /><Text style={styles.instructions}>{this.state.textValue}</Text></View>);}

效果如下

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/289226.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

半年总结——欲戴王冠,必承其重

【Introduction】 每一个女生都梦想着作为一个女王。但是你仅仅看到了女王头上金闪闪的王冠&#xff0c;却不知道在这个王冠下。她是怎样成长的&#xff01;假设你想要做到有女王一样的权利&#xff0c;就必需要承担一个女王应该做到的事情&#xff01;——欲带王冠&#xff0c…

SQL日期时间格式自由转换大全

日期数据格式的处理,两个示例: CONVERT(varchar(16), 时间一, 20) 结果:2007-02-01 08:02/*时间一般为getdate()函数或数据表里的字段*/ CONVERT(varchar(10), 时间一, 23) 结果:2007-02-01 /*varchar(10)表示日期输出的格式,如果不够长会发生截取*/

一维数组和二维数组的区别_数组指针和指针数组的区别

数组指针和指针数组的区别 - hongcha_717 - 博客园​www.cnblogs.com数组指针&#xff08;也称行指针&#xff09;定义 int (*p)[n];()优先级高&#xff0c;首先说明p是一个指针&#xff0c;指向一个整型的一维数组&#xff0c;这个一维数组的长度是n&#xff0c;也可以说是p的…

mysql 配置多个数据库连接_总结MySQL修改最大连接数的两个方式

问题在使用MySQL数据库的时候&#xff0c;经常会遇到这么一个问题&#xff0c;就是“Can not connect to MySQL server. Too many connections”-mysql 1040错误&#xff0c;这是因为访问MySQL且还未释放的连接数目已经达到MySQL的上限。通常&#xff0c;mysql的最大连接数默认…

饿了么超级会员,年卡低至108元!饿了么会员,点外卖超省钱!

饿了么是大家常用的外卖平台&#xff0c;经常点外卖的朋友&#xff0c;充个饿了么超级吃货卡&#xff0c;还是能省不少钱的&#xff0c;今天给大家带来饿了么会员特价充值&#xff0c;会员秒到&#xff01;饿了么超级会员特价充值月卡&#xff1a;原价15元&#xff0c;特价仅需…

React Native之内部方法常用几种写法和调用规则

1 简单部分代码 export default class App extends Component<Props> {render() {return (<View style{styles.container}><View style{styles.welcome}><Button onPress{this.showMsg}titleprees me showMsg/> <Button onPress{() > {this.sho…

阿里云欧洲数据中心开放运营:与沃达丰达成战略合作

摘要&#xff1a;近日&#xff0c;阿里云在德国宣布正式登陆欧洲市场&#xff0c;其位于欧洲的数据中心正式开放运营&#xff0c;同时与沃达丰达成战略合作&#xff0c;携手为欧洲提供云计算服务&#xff0c;并为中国企业进入欧洲市场提供互联网基础设施便利。 据悉&#xff0c…

C#ListView控件添加复选框并获取选中的数目

1、添加复选框:listView1.CheckBoxes = true; 2、选中listview并获取选中的数目: private void listView1_ItemChecked(object sender, ItemCheckedEventArgs e){e.Item.Selected = e.Item.Checked;m = listView1.CheckedItems.Count;label1.Text = "当前选中数:"…

MFS学习总结

MFS学习总结 MFS概述、特性和新版改进MFS 工作原理和设计架构MFS的安装、部署、配置MFS的高级特性MFS的性能测试MFS集群的维护MFS的常见问题和建议对策一、MFS概述、特性和新版改进 MooseFS是一个分布式存储的框架&#xff0c;其具有如下特性&#xff1a; Free(GPL)通用文件系统…

python打开csv文件乱码_python脚本解决csv文件用excel打开乱码

import os path csv文件路径 targetPath 转换编码保存路径 def getfiles(path): path_collection[] for dirpath,dirnames,filenames in os.walk(path): for file in filenames: fullpathos.path.join(dirpath,file) path_collection.append(fullpath) return path_collection…

Linux - 命令

1、查看目录下有什么文件/目录操作 > ls //list列出目录文件的信息 > ls -l //list -list 以“详细信息”查看目录文件 > ls -a //list -all查看目录“全部&#xff08;包括隐藏文件&…

c 编程 mysql结果集_使用mysql C语言API编写程序—MYSQL数据库查询操作(执行查询操作,获取查询结果的字段数,记录行数,...

//MYSQL_RES保存查询结构MYSQL_RES*result_ NULL;interror_code 0; //保存错误码charerror_info[1024] \0; //保存错误信息//对mysql数据库进行查询操作:charquery_sql[1024] "select * from db_name.table_name";//构建查询sql语句if(result_! NULL) //防止之前…

介绍一款受欢迎的.NET 开源UI库

概述今天要带大家了解的是一款WPF的开源控件库MahApps.Metro。MahApps.Metro是用于创建现代WPF应用程序的工具包&#xff0c;它许多开箱即用的好东西。目前支持的NET Framework 4.6.2及更高版本、.NET Core 3.1, .NET 5 and .NET 6 (on Windows)。官网学习文档地址&#xff1a;…

图像分类中混淆矩阵精度验证法中的几个指标说明

ToolBox->Classification->PostClassification->Confusion Matrix->Using Ground Truth ROIs,可以得到如下的分类精度验证的混淆矩阵。 要看懂这个精度验证结果,需要了解几个混淆矩阵中的几项评价指标:

React Native之触摸事件(Touchable系列和onLongPress)

1 触摸事件 普通点击我们可以使用onPress方法,我们可以使用Touchable 系列控件设计我们的按钮 TouchableHighlight 背景会在用户手指按下时变暗 TouchableNativeFeedback用户手指按下时形成类似墨水涟漪的视觉效果 TouchableOpacity指按下时降低按钮的透明度&#xff0c;而…

社交背水一战?校园日记背后,支付宝野心你真能懂?

“校园日记”昨天火了一天&#xff0c;我们也是时候来聊聊支付宝背后的具体战略和意图了。今天早上看到虎嗅的头条《支付宝的“圈子”&#xff0c;阿里做社交的背水一战》&#xff0c;文章观点主要分析了支付宝做社交的必要性&#xff0c;以及这次切入社交领域的巧妙性。 这篇文…

WebForm 使用点滴。。。。

WebForm使用方式与WinForm很是相似&#xff0c;可控性非常高&#xff01; 1、调用别的按钮事件&#xff1a; BtnSelect_Click(sender, e);转载于:https://www.cnblogs.com/chenmfly/p/4409447.html

System.FormatException: GUID 应包含带 4 个短划线的 32 位数(xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx)。...

在NHibernate数据库查询中出现了这个错误&#xff0c;由于是数据库是mysql的&#xff0c;当定义的字段为char(36)的时候就会出现这个错误。 【解决方法】 将char(36) 改成varchar(40)就行了 参考&#xff1a;http://www.cnblogs.com/end/archive/2012/12/26/2834068.html转载于…

python3文件的编码类型是什么_Python3编码类型有哪些?怎么转换?

经过小伙伴们的提醒&#xff0c;小编发现编码方面少讲了一个基础知识&#xff0c;所以有的小伙伴对这方面的内容比较模糊&#xff0c;这就让小编有点尴尬了。收到大家的催促&#xff0c;小编马上就整理出了编码类型的资料&#xff0c;内容方面都是经过精简的&#xff0c;便于小…

北大青鸟s2结业考试机试_重庆北大青鸟「学员心声」任何一次的考试,都是一次珍贵的蜕变...

相信不少同学&#xff0c;在每次考完试后都会有一段 “舒适期‘’。虽然这时候有讲评、有成绩、有排名&#xff0c;但就是感觉学习压力少了许多。然而重庆北大青鸟校区鼓励学员考完要分析、总结考试结果&#xff0c;这样才能更好的找出在学习中遇到的问题并加以解决。以下分享的…