浅谈React Native中的FlexBox格局 - Flex当前位置:& &&&浅谈React Native中的FlexBox格局浅谈React Native中的FlexBox格局&&网友分享于：&&浏览：0次浅谈React Native中的FlexBox布局
React Native通过一个基于FlexBox的布局引擎，在所有移动平台上实现了一致的跨平台样式和布局方案。
FlexBox布局目前支持的属性有如下6个：
（2）flexDirection
（3）alignSelf
（4）alignItems
（5）justifyContent
（6）flexWrap
接下来，我们一个一个的看一下每个属性的作用。
（1）flex属性
当一个元素定义了flex属性时，表示该元素是可伸缩的（flex的属性值大于0的时候才可伸缩）。
var Demo = React.createClass({
render: function() {
&View style={styles.style_0}&
&View style={styles.style_1}&
&Text style={{marginTop:40, fontSize:25}}&1／4高&/Text&
&View style={styles.style_1}&
&Text style={{marginTop:40, fontSize:25}}&1／4高&/Text&
&View style={{flex:10, borderWidth:1, borderColor:'red'}}&
&Text style={{marginTop:40, fontSize:25}}&1／2高&/Text&
var styles = StyleSheet.create({
height: 40,
borderWidth: 1,
borderColor: 'red',
上面的代码，最外层的View是可伸缩的，而且没有兄弟节点和它抢占空间。内层的三个View的flex属性值分别是5、5、10，所以，第一个View和第二个View分别占1 / 4的伸缩空间，最后一个View占1 / 2的伸缩空间。
（2）flexDirection
flexDirection在React Native中只有两个属性值，row（横向伸缩）和column（纵向伸缩）。
var Demo = React.createClass({
render: function() {
&View style={styles.style_0}&
&View style={styles.style_1}&
&Text style={{marginTop:40, fontSize:25}}&1／4高&/Text&
&Text style={{marginTop:40, fontSize:25}}&1／4高&/Text&
&View style={[styles.style_1, {flexDirection:'column'}]}&
&Text style={{marginTop:40, fontSize:25}}&1／4高&/Text&
&Text style={{marginTop:40, fontSize:25}}&1／4高&/Text&
&View style={{flex:10, borderWidth:1, borderColor:'red'}}&
&Text style={{marginTop:40, fontSize:25}}&1／2高&/Text&
var styles = StyleSheet.create({
flexDirection: 'row',
height: 40,
borderWidth: 1,
borderColor: 'red',
（3）alignSelf
alignSelf的对齐方式主要有四种：flex-start、flex-end、center、auto、stretch。
var Demo = React.createClass({
render: function() {
&View style={styles.style_0}&
&View style={[styles.view]}&
&Text&自由摆放&/Text&
&View style={[styles.view, styles.center]}&
&Text&居中摆放&/Text&
&View style={[styles.view, styles.left]}&
&Text&居左摆放&/Text&
&View style={[styles.view, styles.right]}&
&Text&居右摆放&/Text&
var styles = StyleSheet.create({
borderColor: 'red',
borderWidth: 1
borderWidth: 5,
borderColor: 'blue',
marginTop: 40,
width: 100,
height: 40
alignSelf: 'center'
alignSelf: 'flex-start'
alignSelf: 'flex-end'
（4）alignItems
alignItems是alignSelf的变种，跟alignSelf的功能类似，可用于水平居中。justifyContent用于垂直居中。
var Demo = React.createClass({
render: function() {
&View style={styles.style_0}&
&View style={[styles.view]}&
&Text&居中摆放&/Text&
var styles = StyleSheet.create({
borderColor: 'red',
borderWidth: 1,
justifyContent: 'center',
alignItems: 'center'
borderWidth: 3,
borderColor: 'blue',
width: 100,
height: 50
12345678910
12345678910
12345678910 上一篇：没有了下一篇：文章评论相关解决方案 1234567891011 Copyright & &&版权所有React-Native（10）
一款好的APP离不了一个漂亮的布局，本文章将向大家分享React Native中的布局方式FlexBox。&
在React Native中布局采用的是FleBox(弹性框)进行布局。
FlexBox提供了在不同尺寸设备上都能保持一致的布局方式。FlexBox是CSS3弹性框布局规范，目前还处于最终征求意见稿 (Last Call Working Draft)阶段，并不是所有的浏览器都支持Flexbox。但大家在做React Native开发时大可不必担心FlexBox的兼容性问题，因为既然React Native选择用FlexBox布局，那么React Native对FlexBox的支持自然会做的很好。
在学习FlexBox之前首先要清楚一个概念“宽和高”。一个组件的高度和宽度决定了它在屏幕上的尺寸，也就是大小。
在React Native中尺寸是没有单位的，它代表了设备独立像素。
&View style={ {width:100,height:100,margin:40,backgroundColor:'gray'}}&
&Text style={ {fontSize:16,margin:20}}&尺寸&/Text&
上述代码，运行在Android上时，View的长和宽被解释成：100dp 100dp单位是dp，字体被解释成16sp 单位是sp，运行在iOS上时尺寸单位被解释称了pt，这些单位确保了布局在任何不同dpi的手机屏幕上显示不会发生改变；
值得一提的是，React Native中的FlexBox 和Web CSSS上FlexBox工作方式是一样的。但有些地方还是有些出入的，如：
React Native中的FlexBox 和Web CSSS上FlexBox的不同之处
flexDirection: React Native中默认为flexDirection:'column'，在Web
CSS中默认为flex-direction:'row'alignItems: React Native中默认为alignItems:'stretch'，在Web
CSS中默认align-items:'flex-start'flex: 相比Web CSS的flex接受多参数，如:flex:
2 2 10%;，但在 React Native中flex只接受一个参数不支持属性：align-content，flex-basis，order，flex-basis，flex-flow，flex-grow，flex-shrink
以上是React Native中的FlexBox 和Web CSSS上FlexBox的不同之处，记住这几点，你可以像在Web CSSS上使用FlexBox一样，在React Native中使用FlexBox。
Layout Props
Flex in React Native
以下属性是React Native所支持的Flex属性。
父视图属性(容器属性)：
flexDirection enum(‘row’, ‘column’,’row-reverse’,’column-reverse’)flexWrap enum(‘wrap’, ‘nowrap’)justifyContent enum(‘flex-start’, ‘flex-end’, ‘center’, ‘space-between’, ‘space-around’)alignItems enum(‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’)
主轴和侧轴(横轴和竖轴)
在学习上述属性之前，让我们先了解一个概念：主轴和侧轴
主轴即水平方向的轴线，可以理解成横轴，侧轴垂直于主轴，可以理解为竖轴。
flexDirection
flexDirection enum('row', 'column','row-reverse','column-reverse')
flexDirection属性定义了父视图中的子元素沿横轴或侧轴方片的排列方式。
row: 从左向右依次排列row-reverse: 从右向左依次排列column(default): 默认的排列方式，从上向下排列column-reverse: 从下向上排列
&View style={ {flexDirection:'row-reverse',backgroundColor:&darkgray&,marginTop:20}}&
&View style={ {width:40,height:40,backgroundColor:&darkcyan&,margin:5}}&
&Text style={ {fontSize:16}}&1&/Text&
&View style={ {width:40,height:40,backgroundColor:&darkcyan&,margin:5}}&
&Text style={ {fontSize:16}}&2&/Text&
&View style={ {width:40,height:40,backgroundColor:&darkcyan&,margin:5}}&
&Text style={ {fontSize:16}}&3&/Text&
&View style={ {width:40,height:40,backgroundColor:&darkcyan&,margin:5}}&
&Text style={ {fontSize:16}}&4&/Text&
flexWrap enum('wrap', 'nowrap')
flexWrap属性定义了子元素在父视图内是否允许多行排列，默认为nowrap。
nowrap flex的元素只排列在一行上，可能导致溢出。wrap flex的元素在一行排列不下时，就进行多行排列。
style={ {flexWrap:'wrap',flexDirection:'row',backgroundColor:&darkgray&,marginTop:20}}&
justifyContent
justifyContent enum('flex-start', 'flex-end', 'center',
'space-between', 'space-around')&
justifyContent属性定义了浏览器如何分配顺着父容器主轴的弹性（flex）元素之间及其周围的空间，默认为flex-start。
flex-start(default) 从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐。flex-end 从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。center 伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。space-between 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。space-around 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
style={ {justifyContent:'center',flexDirection:'row',backgroundColor:&darkgray&,marginTop:20}}&
alignItems
alignItems enum('flex-start', 'flex-end', 'center',
'stretch')
alignItems属性以与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐，默认为stretch。
flex-start 元素向侧轴起点对齐。flex-end 元素向侧轴终点对齐。center 元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。stretch 弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。
style={ {justifyContent:'center',flexDirection:'row',backgroundColor:&darkgray&,marginTop:20}}&
子视图属性
alignSelf enum(‘auto’, ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’)flex number
alignSelf enum('auto', 'flex-start', 'flex-end',
'center', 'stretch')
alignSelf属性以属性定义了flex容器内被选中项目的对齐方式。注意：alignSelf
属性可重写灵活容器的 alignItems 属性。
auto(default) 元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。stretch 元素被拉伸以适应容器。center 元素位于容器的中心。flex-start 元素位于容器的开头。flex-end 元素位于容器的结尾。
&View style={ {alignSelf:'baseline',width:60,height: 20,backgroundColor:&darkcyan&,margin:5}}&
&Text style={ {fontSize:16}}&1&/Text&
flex number
flex&属性定义了一个可伸缩元素的能力，默认为0。 &
&View style={ {flexDirection:'row',height:40, backgroundColor:&darkgray&,marginTop:20}}&
&View style={ {flex:1,backgroundColor:&darkcyan&,margin:5}}&
&Text style={ {fontSize:16}}&flex:1&/Text&
&View style={ {flex:2,backgroundColor:&darkcyan&,margin:5}}&
&Text style={ {fontSize:16}}&flex:2&/Text&
&View style={ {flex:3,backgroundColor:&darkcyan&,margin:5}}&
&Text style={ {fontSize:16}}&flex:3&/Text&
其他布局 in React Native
以下属性是React Native所支持的除Flex以外的其它布局属性。
borderBottomWidth number 底部边框宽度borderLeftWidth number 左边框宽度borderRightWidth number 右边框宽度borderTopWidth number 顶部边框宽度borderWidth number 边框宽度
border&Bottom
Top&Color 个方向边框的颜色
borderColor 边框颜色
width numberheight number
margin number 外边距marginBottom number 下外边距marginHorizontal number 左右外边距marginLeft number 左外边距marginRight number 右外边距marginTop number 上外边距marginVertical number 上下外边距
padding number 内边距paddingBottom number 下内边距paddingHorizontal number 左右内边距paddingLeft number 做内边距paddingRight number 右内边距paddingTop number 上内边距paddingVertical number 上下内边距
left number 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。right number 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移top number 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。bottom number 属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
定位(position)
position enum(‘absolute’, ‘relative’)属性设置元素的定位方式，为将要定位的元素定义定位规则。
absolute：生成绝对定位的元素，元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。relative：生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：415067次
积分：6929
积分：6929
排名：第2210名
原创：236篇
转载：227篇
评论：94条
关注：iOS开发、产品经理
(6)(5)(5)(4)(4)(5)(4)(8)(5)(5)(6)(10)(6)(6)(14)(6)(11)(5)(6)(6)(8)(7)(8)(11)(12)(22)(13)(13)(20)(15)(38)(30)(67)(22)(2)(24)(10)(8)(14)(3)Andriod React Native 样式表中可用样式属性
写了这么多篇Android React Native的博文，基本上把复杂的东西都搞定了，接下来来看看一些轻松的东西，和布局有关，就是css样式，那么一个View可以设置哪些css样式呢，是和web中的css样式完全一样呢，还是有所不同呢？其实你只要在样式表中书写一个不存在的样式，就会报一大堆错，提示你该样式不存在，然后提供所有可用的样式给你，如图
下面的样式就是样式表中所有可用的属性。
&alignItems&,
&alignSelf&,
&backfaceVisibility&,
&backgroundColor&,
&borderBottomColor&,
&borderBottomLeftRadius&,
&borderBottomRightRadius&,
&borderBottomWidth&,
&borderColor&,
&borderLeftColor&,
&borderLeftWidth&,
&borderRadius&,
&borderRightColor&,
&borderRightWidth&,
&borderStyle&,
&borderTopColor&,
&borderTopLeftRadius&,
&borderTopRightRadius&,
&borderTopWidth&,
&borderWidth&,
&flexDirection&,
&flexWrap&,
&fontFamily&,
&fontSize&,
&fontStyle&,
&fontWeight&,
&justifyContent&,
&letterSpacing&,
&lineHeight&,
&marginBottom&,
&marginHorizontal&,
&marginLeft&,
&marginRight&,
&marginTop&,
&marginVertical&,
&opacity&,
&overflow&,
&padding&,
&paddingBottom&,
&paddingHorizontal&,
&paddingLeft&,
&paddingRight&,
&paddingTop&,
&paddingVertical&,
&position&,
&resizeMode&,
&rotation&,
&shadowColor&,
&shadowOffset&,
&shadowOpacity&,
&shadowRadius&,
&textAlign&,
&textDecorationColor&,
&textDecorationLine&,
&textDecorationStyle&,
&tintColor&,
&transform&,
&transformMatrix&,
&translateX&,
&translateY&,
&writingDirection&
接下来我们来一一解释一下。不过在这之前，我们还需要解释一下再React中，样式表的几种使用方法。
样式的声明
var styles = StyleSheet.create({
width: 38,
height: 38,
background: {
backgroundColor: '#;,
borderWidth: 2,
borderColor: '#00ff00',
& data-snippet-id=&ext.aa509d6f30a32f005f24a8d6e4ff9d13& data-snippet-saved=&false& data-codota-status=&done&&
也可以接收一个数组
也可以根据条件来应用样式
& data-snippet-id=&ext.3bbd9df76bc1d& data-snippet-saved=&false& data-codota-status=&done&&
假如this.state.active是true，styles.active就会被应用，如果为false，styles.active就不会被应用。
当然也是支持下面的这种写法
& data-snippet-id=&ext.f05f6af519aa220be4e73e& data-snippet-saved=&false& data-codota-status=&done&&
接下来来讲讲样式表中的具体属性。
定位分为相对定位和绝对定位，属性名为position，属性值为absolute和relative。
当使用绝对布局时，定位根据屏幕来进行。
var AwesomeProject = React.createClass({
render: function() {
var styles = StyleSheet.create({
container:{
backgroundColor:'#ff0'//黄色
height:50,
backgroundColor:'#f00',//红色
position :'absolute',
left:30,//左边距离屏幕左侧30单位
height:50,
backgroundColor:'#0f0',//绿色
position :'absolute',
top:30,//上边距离屏幕上侧30单位
height:50,
backgroundColor:'#f0f',//紫色
position :'absolute',
right:30,//右边距离屏幕右侧30单位
height:50,
backgroundColor:'#00f',//蓝色
position :'absolute',
bottom:30//下边距离屏幕下侧30单位
效果图如下。
当对应的值为负数时，方向与原方向相反，即如果tZ"/kf/ware/vc/" target="_blank" class="keylink">vcM6qLTUwo6zU8rvh1fu49tLGs/a1vcbBxLvN4qOoz/LJz9LGtb01MLj2taXOu6OpoaM8L3A+DQo8cD7Ex8O0z+C21LK8vtbT1srH1PXDtNH5tcTE2DwvcD4NCjxwcmUgY2xhc3M9"brush:">
var AwesomeProject = React.createClass({
render: function() {
var styles = StyleSheet.create({
container:{
backgroundColor:'#ff0'//黄色
height:50,
backgroundColor:'#f00',//红色
position :'relative',
可以看到设置了top和left后，相对于不使用定位的位置向右向下移动了30单位，如果值为负数，也是往相反的方向移到。
但是如果设置了right和bottom后，又会怎么样呢
var styles = StyleSheet.create({
container:{
backgroundColor:'#ff0'//黄色
height:50,
backgroundColor:'#f00',//红色
position :'relative',
bottom:30,
其实它的效果就是对应的top和left为负值的情况。距离原来位置的右侧30单位，距离原来位置下侧30单位，即向上向左平移30单位。原来位置就是不使用定位时的位置。如图
默认情况下使用的是相对定位
borderBottomWidth //底部边框宽度
borderLeftWidth
//左边边框宽度
borderRightWidth //右边边框宽度
borderTopWidth //顶部边框宽度
borderWidth
//所有边框宽度
你可以使用设置所有边框的宽度，也可以设置指定某条边的宽度。
同边框宽度属性，属性值为字符串类型的rgb表示方式
borderBottomColor
borderLeftColor
borderRightColor
borderTopColor
borderColor
marginBottom
marginLeft
marginRight
marginVertical
marginHorizontal
值得注意的是marginVertical相当于同时设置marginTop和marginBottom，marginHorizontal相当于同时设置marginLeft和marginRight，margin相当于同时设置四个
paddingBottom
paddingLeft
paddingRight
paddingTop
paddingVertical
paddingHorizontal
背景色，属性值为字符串类型的rgb表示方式
backgroundColor
borderTopLeftRadius
borderTopRightRadius
borderBottomLeftRadius
borderBottomRightRadius
borderRadius
Flex布局相关
相关内容见Flex 布局教程：语法篇和Flex 布局教程：实例篇，个人觉得写得很清晰
flex number
flexDirection enum('row', 'column')
flexWrap enum('wrap', 'nowrap')
alignItems enum('flex-start', 'flex-end', 'center', 'stretch')
alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')
justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')
字体相关属性
color 字体颜色
fontFamily 字体族
fontSize 字体大小
fontStyle 字体样式，正常，倾斜等，值为enum('normal', 'italic')
fontWeight 字体粗细，值为enum(&normal&, 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
letterSpacing 字符间隔
lineHeight 行高
textAlign 字体对齐方式，值为enum(&auto&, 'left', 'right', 'center', 'justify')
textDecorationLine 貌似没效果，字体修饰，上划线，下划线，删除线，无修饰，值为enum(&none&, 'underline', 'line-through', 'underline line-through')
textDecorationStyle enum(&solid&, 'double', 'dotted', 'dashed') 貌似没效果，修饰的线的类型
textDecorationColor 貌似没效果，修饰的线的颜色
writingDirection enum(&auto&, 'ltr', 'rtl') 不知道什么属性，写作方向？从左到右？从右到左？
图片相关属性
resizeMode enum('cover', 'contain', 'stretch')
overflow enum('visible', 'hidden') 超出部分是否显示，hidden为隐藏
tintColor 着色，rgb字符串类型
opacity 透明度
其中resizeMode 中的三个属性，contain是指无论如何图片都包含在指定区域内，假设设置的宽度高度比图片大，则图片居中显示，否则，图片等比缩小显示
测试代码如下
var AwesomeProject = React.createClass({
render: function() {
var styles = StyleSheet.create({
container:{
backgroundColor:'#ff0'//黄色
height:150,
resizeMode:&contain&
效果图如下图显示
将高度改成50，则进行缩小
cover是指按实际大小进行显示，超出部分进行裁剪，将属性值改成cover之后的效果图如下
stretch是指将图像进行拉伸显示，将属性值改为stretch后的效果如下图所示
scaleX:水平方向缩放
scaleY:垂直方向缩放
rotation:旋转
translateX:水平方向平移
translateY:水平方向平移
shadowColor
shadowOffset
shadowOpacity
shadowRadius
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'react-native（7）
转载链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/react-native-component-packaging-and-traditional-values/
刚接触React-Native的时候也是看官方文档，官方文档就是讲的基础的组件与与基础的API,然后就开始写一些简单的界面，但是发现自己写的简单界面代码非常的长，修改起来也是非常的麻烦，维护起来非常的费尽。那么今天就简单的介绍一下组件的封装和传值吧。你会发现节省了好多的代码。
& & & &&效果图:(如下所示)
一、先说说没有封装之前的代码是什么样子的吧。
'use strict';var React = require('react-native');var {
AppRegistry,
StyleSheet,
PixelRatio,
} = React;var stylesForXC = StyleSheet.create({
container : {
height: 84,
borderWidth:1,
borderColor: 'black',
flexDirection: 'row',
marginTop: 25,
marginLeft: 5,
marginRight: 5,
borderRadius: 5,
/*圆角半径*/padding: 2,
backgroundColor: '#949494'},
height: 80},
justifyContent: 'center',/*垂直水平居中，其实是按照flexDriection的方向居中*/alignItems : 'center',
/*水平居中*/},
color: '#fff',
fontSize: 16,
fontWeight: 'bold',
lineLeft: {
borderLeftWidth: 1/PixelRatio.get(),
borderColor: '#fff',
lineCenter: {
borderBottomWidth:1/PixelRatio.get(),
borderColor: '#fff',
}})'use strict';var React = require('react-native');var {
AppRegistry,
StyleSheet,
PixelRatio,
} = React;var stylesForXC = StyleSheet.create({
container : {
height: 84,
borderWidth:1,
borderColor: '#949494',
flexDirection: 'row',
marginTop: 25,
marginLeft: 5,
marginRight: 5,
borderRadius: 5,
/*圆角半径*/padding: 2,
backgroundColor: '#949494',
height: 80,
justifyContent: 'center',/*垂直水平居中，其实是按照flexDriection的方向居中*/alignItems : 'center',
/*水平居中*/},
color: '#fff',
fontSize: 16,
fontWeight: 'bold',
lineLeft: {
borderLeftWidth: 1/PixelRatio.get(),
borderColor: '#fff',
lineCenter: {
borderBottomWidth:1/PixelRatio.get(),
borderColor: '#fff',
}})AppRegistry.registerComponent('wxsPrj', () =& wxsPrj);var betree2 = React.createClass({
render: function() {
&View style = {stylesForXC.flex}&
&View style = {[stylesForXC.container]}&
&View style = {[stylesForXC.item,stylesForXC.center]}&
&Text style= {stylesForXC.font}&饭馆&/Text&
&View style = {[stylesForXC.item,stylesForXC.lineLeft]}&
&View style = {[stylesForXC.center,stylesForXC.flex,stylesForXC.lineCenter]}&
&Text style= {stylesForXC.font}&服装城&/Text&
&View style = {[stylesForXC.center,stylesForXC.flex]}&
&Text style= {stylesForXC.font}&美食街&/Text&
&View style = {[stylesForXC.item,stylesForXC.lineLeft]}&
&View style = {[stylesForXC.center,stylesForXC.flex,stylesForXC.lineCenter]}&
&Text style= {stylesForXC.font}&电脑城&/Text&
&View style = {[stylesForXC.center,stylesForXC.flex]}&
&Text style= {stylesForXC.font}&全球购&/Text&
}})AppRegistry.registerComponent('betree2', () =& betree2);
& & &我们发现在主函数上界面布局很多，这样不利于模块化的思想，我们其实可以把里面的界面的布局封装成一个名为Box的组件，然后在主函数中对组件进行引用，这样看起来就好多了。
二、封装组件后的代码如下:
render:function(){
&View style = {stylesForXC.flex}&
&View style = {[stylesForXC.container]}&
&View style = {[stylesForXC.item,stylesForXC.center]}&
&Text style= {stylesForXC.font}&饭馆&/Text&
&View style = {[stylesForXC.item,stylesForXC.lineLeft]}&
&View style = {[stylesForXC.center,stylesForXC.flex,stylesForXC.lineCenter]}&
&Text style= {stylesForXC.font}&服装城&/Text&
&View style = {[stylesForXC.center,stylesForXC.flex]}&
&Text style= {stylesForXC.font}&美食街&/Text&
&View style = {[stylesForXC.item,stylesForXC.lineLeft]}&
&View style = {[stylesForXC.center,stylesForXC.flex,stylesForXC.lineCenter]}&
&Text style= {stylesForXC.font}&电脑城&/Text&
&View style = {[stylesForXC.center,stylesForXC.flex]}&
&Text style= {stylesForXC.font}&全球购&/Text&
}})var betree2 = React.createClass({
render: function() {
&Box&&/Box&
& &这样看起来把布局放进去，在主函数中调用就可以了，这样是不是就清晰很多了。有一点我们是需要注意的就是:这种定义的组件首字母一定要大写，不然会报错(如下图所示，意思就是说每个首字母的名字要大写，刚开始我也没注意这个细节)。
& &三、那么问题又来了，如果我想修改&Text&组件里面的内容(比如:'全球购'改为'电脑馆'),有人会说那好办自己找下里面的代码把''全球购'改为'电脑馆'不就可以了，那如果我成百个Text呢?
我们其实可以定义一个组件参数，这样就方便多了。代码如下:
var Box = React.createClass({
render:function(){
&View style = {stylesForXC.flex}&
&View style = {[stylesForXC.container]}&
&View style = {[stylesForXC.item,stylesForXC.center]}&
&Text style= {stylesForXC.font}&{this.props.one}&/Text&
&View style = {[stylesForXC.item,stylesForXC.lineLeft]}&
&View style = {[stylesForXC.center,stylesForXC.flex,stylesForXC.lineCenter]}&
&Text style= {stylesForXC.font}&{this.props.second1}&/Text&
&View style = {[stylesForXC.center,stylesForXC.flex]}&
&Text style= {stylesForXC.font}&{this.props.second2}&/Text&
&View style = {[stylesForXC.item,stylesForXC.lineLeft]}&
&View style = {[stylesForXC.center,stylesForXC.flex,stylesForXC.lineCenter]}&
&Text style= {stylesForXC.font}&{this.props.third1}&/Text&
&View style = {[stylesForXC.center,stylesForXC.flex]}&
&Text style= {stylesForXC.font}&{this.props.third2}&/Text&
}})var betree2 = React.createClass({
render: function() {
&Box one = &饭馆& second1 = &服装城&
second2 = &美食街& third1 = &电脑城& third2 = &全球购&&&/Box&
}})效果图如下所示:
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：2155次
排名：千里之外
(1)(3)(3)(2)