首页
登录 | 注册

React-Native 之控件布局

  Nodejs 一度将前端JS 推到了服务器端,而15年FB的React-Native RN再一次将JS 推到了移动端的开发浪潮中。RN的优势这里不再重复,它是我们这些习惯了服务端、web端开发,而又不想去花太多时间掌握Android、IOS移动端原生开发的人员的福音,可以说是我们通向全栈工程师的快速捷径!于是乎最近开始学习React-Native,并将学习中的一些点滴记录下来。

  网上关于RN的资料不少了,首先是环境配置,不一定非得Mac 下。我是基于Windows开发的,Windows下环境如何配置大家可以参考这篇文章 Windows下RN环境搭配。准备好开发环境之后就是具体的开发知识学习了。首先是RN控件的学习,这里我们先学习RN的控件布局。

  RN的布局采用的是CSS+Flexbox布局方式。我们初始化使用 命令初始化一个名叫reactNative的项目,命令如下:react-native init reactNative。等待完成之后,我们使用WebStorm打开项目,在项目里面的index.android.js文件中插入如下代码:

 1 import React, {Component} from 'react';
 2 import {
 3     AppRegistry,
 4     StyleSheet,
 5     Text,
 6     View
 7 } from 'react-native';
 8 
 9 var App = React.createClass({
10     render: function () {
11         return (
12             <View style={styles.main}>
13                 <View style={styles.view1}>
14                     <Text style={styles.text}>Test1</Text>
15                     <Text style={styles.text}>Test2</Text>
16                     <Text style={styles.text}>Test3</Text>
17                 </View>
18                 <View style={styles.view2}>
19                     <Text style={styles.text}>Test4</Text>
20                     <Text style={styles.text}>Test5</Text>
21                     <Text style={styles.text}>Test6</Text>
22                     <Text style={styles.text}>Test7</Text>
23                     <Text style={styles.text}>Test8</Text>
24                     <Text style={styles.text}>Test9</Text>
25                     <Text style={styles.text}>Test10</Text>
26                 </View>
27             </View>
28         );
29     }
30 })
31 var styles = StyleSheet.create({
32     main: {
33         flex: 1, borderColor: 'blue', margin: 5, borderWidth: 1
34     },
35     view1: {
36         borderColor: 'red', borderWidth: 1, flexDirection: 'column', height: 150
37     },
38     view2: {
39         borderColor: 'red', borderWidth: 1, flexDirection: 'row'
40     },
41     text: {
42         fontSize: 14, margin: 10
43     }
44 })
45 AppRegistry.registerComponent('reactNative', ()=>App);

   编辑完代码之后,我们使用windows command 进入项目的目录,然后使用命令:react-native start启动项目,然后启动模拟器,接着使用命令:react-native run-android。就可以在模拟器中看到如下效果!

 React-Native 之控件布局

 

这里结合代码,我们可以看出:最外层的View我们使用的是样式style.main,采用的flex:1,borderColor:’blue’ 就是我们图片中最外层的蓝色边框视图。flex值大于0是表示控件是可以伸缩的,由于没有其他视图和这里的最外层View视图竞争空间,因此它填充满了我们这个手机屏幕。然后里面有2个子View视图。

第一个视图使用样式style.view1 它的边框是红色,采用的flexDirection:’column’纵向伸缩,因此它里面的三个Text控件都是从上往下依次排列的。

第二个视图使用样式style.view2 它的边框也是红色,采用的flexDirection:’row’横向伸缩,因此它里面的7个Text控件都是从左向右依次排列的。(最后一个Text超出了手机宽度边界,未显示完整。)

由此我们可以看出:在RN中flexbox的flexDirection有两个字column和row默认为column值。当设置为column时控件按照纵向依次排列布局,当设置为row时控件按照横向依次排列布局;

前面我们说了最外层的View设置flex=1是因为没有其他控件和它竞争空间,因此它填充满了我们整个手机屏幕。这里我们修改一下样式表styles向其中添加几个样式,并将它们应用到View1中的3个Text中,修改代码如下:

 1 var App = React.createClass({
 2     render: function () {
 3         return (
 4             <View style={styles.main}>
 5                 <View style={styles.view1}>
 6                     <Text style={[styles.text,styles.row1]}>Test1</Text>
 7                     <Text style={[styles.text,styles.row2]}>Test2</Text>
 8                     <Text style={[styles.text,styles.row3]}>Test3</Text>
 9                 </View>
10                 <View style={styles.view2}>
11                     <Text style={styles.text}>Test4</Text>
12                     <Text style={styles.text}>Test5</Text>
13                     <Text style={styles.text}>Test6</Text>
14                     <Text style={styles.text}>Test7</Text>
15                     <Text style={styles.text}>Test8</Text>
16                     <Text style={styles.text}>Test9</Text>
17                     <Text style={styles.text}>Test10</Text>
18                 </View>
19             </View>
20         );
21     }
22 })
23 var styles = StyleSheet.create({
24     main: {
25         flex: 1, borderColor: 'blue', margin: 5, borderWidth: 1
26     },
27     view1: {
28         borderColor: 'red', borderWidth: 1, flexDirection: 'column', height: 150
29     },
30     view2: {
31         borderColor: 'red', borderWidth: 1, flexDirection: 'row'
32     },
33     text: {
34         fontSize: 14, margin: 10
35     },
36     row1: {flex: 3},
37     row2: {flex: 2},
38     row3: {flex: 1}
39 })

    这里我们将View1中的三个Text控件的flext值分别设置为3,2,1,然后我们在手机中看的效果如下图:我们可以看出三个Text控件的高度分别为3:2:1占满了我们的View1的高度,这也证实了我们前面的结论。

React-Native 之控件布局

   

  然后我们看一下alignSelf布局,alignSelf的对齐方式主要有四种:flex-start、 flex-end、 center、  auto、 stretch。我们添加如下代码:

 

 1 <View style={styles.view3}>
 2     <View  style={[styles.left,{width:100,height:40, borderWidth:1,borderColor:'silver'}]}><Text>left</Text></View>
 3     <View   style={[styles.center,{width:100,height:40,borderWidth:1,borderColor:'silver'}]}><Text>center</Text></View>
 4     <View  style={[styles.right,{width:100,height:40,borderWidth:1,borderColor:'silver'}]}><Text>right</Text></View>
 5     <View style={[styles.default,{width:100, height:40,borderWidth:1,borderColor:'silver'}]}><Text>default</Text></View>
 6 </View>
 7 
 8 styles:
 9 view3: {flex: 1, margin: 5, borderColor: 'red', borderWidth: 1},
10 left: {alignSelf: 'flex-start'},
11 center: {alignSelf: 'center'},
12 right: {alignSelf: 'flex-end'},
13 default: {alignSelf: 'auto'},
可以看到如下的效果:

React-Native 之控件布局

 

  然后还有alignItems、justifyContent它们分别是水平居中、垂直居中。它们的用法如下,我们添加如下代码:

1 <View style={[styles.view3,{alignItems:'center',justifyContent:'center'}]}>
2     <View style={{width:120,height:30, borderWidth:1,borderColor:'silver'}}>
3         <Text>水平垂直居中</Text>
4     </View>
5 </View>
运行之后可以看到如下效果:

React-Native 之控件布局


以上就是RN的CSS和flexbox布局的简单学习。

相关文章

  • 安卓开发笔记(二十九):顶部标题栏
    首先上图: 实现这个标题栏,我们还需要一个返回的按钮,这里也贴出来.笔者直接将这个简单的标题栏制作成了一个依赖库,放在到github上,方便下次进行调用. 返回按钮如下: 在使用这个按钮的时候需要注意其尺寸的大小一定要小于我们的标题栏. v ...
  • c#开发Android初学(一)
    我也是最近开始学习用c#开发android,最近找在好心网友那里下到了四个android开发安卓的视频(传智的)有想要的朋友可以留下邮箱 废话不多收,分享我最近一个星期的成果. 先看最主要的一个获取数据的方法FindViewById< ...
  • 博客园美化教程第二篇----极致个性化你的专属博客(为博客添加背景音乐插件,调整页面布局等)
    阅读目录: 1. 前言 2. 定制自己的博客 0. 美化整体效果 1. 准备工作 2. 添加博客背景音乐插件 3. 为博客文章内容主体定制漂亮的显示样式 4. 公告栏日历样式定制 5. 待续... 3. 后语 博客园美化教程大集合——极致个 ...
  • Android6.0 源码修改之 Contacts应用
    一.Contacts应用的主界面和联系人详情界面增加顶部菜单添加退出按钮 通过Hierarchy View 工具可以发现 主界面对应的类为 PeopleActivity 联系人详情界面对应的类为 QuickContactActivity 左 ...
  • MongoDB【快速入门】
    1.MongDB 简介 MongoDB(来自于英文单词"Humongous",中文含义为"庞大")是可以应用于各种规模的企业.各个行业以及各类应用程序的开源数据库.作为一个适用于敏捷开发的数据库,Mo ...
  • 如何零基础开始自学Python编程
    转载——原作者:赛门喵 链接:https://www.zhihu.com/question/29138020/answer/141170242 0. 明确目标 我是真正零基础开始学Python的,从一开始的一窍不通,到3个月后成功搭建了一个 ...

2020 cecdns.com webmaster#cecdns.com
12 q. 0.082 s.
京ICP备10005923号