[关闭]
@Awesome-Tauren 2016-06-13T07:14:14.000000Z 字数 16146 阅读 550

react-native 布局

rn

1 flex布局基本概念

flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。采用flex布局的元素，称为flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为flex项目（flex item），简称"项目"。如下图所示：

image

容器默认存在两根轴：主轴（main axis）和交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

Flex布局与Android的线性布局（LinearLayout）有点类似，都可以设置布局方向，对齐方式，以及项目的布局占位权重，区别是flex容器中项目分布的总长度超出屏幕宽度，超出的那部分项目不可见，项目不会变形，或者可以设置flexWrap属性，让容器可以分行布局，所有项目都能显示出来。

2 flex基本属性

flex属性声明在：/node_modules/react-native/Libraries/StyleSheet/LayoutPropTypes.js

  1.   // https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
  2.   flexDirection: ReactPropTypes.oneOf([
  3.     'row',
  4.     'column'
  5.   ]),
  7.   // https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
  8.   flexWrap: ReactPropTypes.oneOf([
  9.     'wrap',
  10.     'nowrap'
  11.   ]),
  13.   // How to align children in the main direction
  14.   // https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
  15.   justifyContent: ReactPropTypes.oneOf([
  16.     'flex-start',
  17.     'flex-end',
  18.     'center',
  19.     'space-between',
  20.     'space-around'
  21.   ]),
  23.   // How to align children in the cross direction
  24.   // https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
  25.   alignItems: ReactPropTypes.oneOf([
  26.     'flex-start',
  27.     'flex-end',
  28.     'center',
  29.     'stretch'
  30.   ]),
  32.   // How to align the element in the cross direction
  33.   // https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
  34.   alignSelf: ReactPropTypes.oneOf([
  35.     'auto',
  36.     'flex-start',
  37.     'flex-end',
  38.     'center',
  39.     'stretch'
  40.   ]),
  42.   // https://developer.mozilla.org/en-US/docs/Web/CSS/flex
  43.   flex: ReactPropTypes.number,

由上述代码，我们可以看到flex的属性并不多，而且很好记忆，以下将会一一介绍

flex属性可以分为容器属性和项目属性
其中容器属性包括：flexDirection，justifyContent，alignItems，flexWrap

项目属性包括：flex，alignSelf

以下介绍会使用到一些代码和图片，先定义两个简单组件，方便理解

  1. //定义一个默认半径为20，颜色为#527fe4的圆组件
  2. var Circle = React.createClass({
  3.   render : function(){
  4.     var size = this.props.size || 20;
  5.     var color = this.props.color || '#527fe4';
  6.     return <View style={{backgroundColor:color,borderRadius:size/2,height:size,width:size,margin:1}}/>
  7.   },
  8. });
  10. //定义一个放置标题和项目的容器，传入的value属性将会是需要介绍的flex属性
  11. var Value = React.createClass({
  12.   render : function(){
  13.     var value = 
  14.       <View>
  15.         <Text style={styles.valueText}>{this.props.title}</Text>
  16.         <View style={[styles.valueContainer,this.props.value]}>
  17.           {this.props.children}
  18.         </View>
  19.       </View>;
  20.     return value;
  21.   },
  22. });
  24. //定义一个数组放置5个圆
  25. var children = [<Circle/>,<Circle/>,<Circle/>,<Circle/>,<Circle/>];

2.1 容器属性

  1. flexDirection：布局方向，决定主轴的方向，默认值是column，即纵向布局

    值 描述
    row 横向布局，主轴为水平方向
    column 纵向布局，主轴为竖直方向

    row：横向布局
    代码：

    1. <Value title='row' value={{flexDirection:'row'}}>
    2.     {children}
    3. </Value>

    视图：
    image


    column：纵向布局
    代码：

    1. <Value title='column' value={{flexDirection:'column'}}>
    2.     {children}
    3. </Value>

    视图：
    image


  2. justifyContent：主轴方向对齐方式，默认值是flex-start，即主轴的开端

    值 描述
    flex-start 主轴开端
    center 居中
    flex-end 主轴末端
    space-between 项目与项目之间插入相等空隙
    space-around 项目两旁插入相等空隙

    flex-start：主轴开端
    代码：

    1. <Value title='flex-start' value={{flexDirection:'row', justifyContent:'flex-start'}}>
    2.     {children}
    3. </Value>

    视图：
    image


    center：主轴的中间位置
    代码：

    1. <Value title='center' value={{flexDirection:'row',justifyContent:'center'}}>
    2.     {children}
    3. </Value>

    视图：
    image


    flex-end：主轴的末端位置
    代码：

    1. <Value title='flex-end' value={{flexDirection:'row',justifyContent:'flex-end'}}>
    2.     {children}
    3. </Value>

    视图：
    image


    space-between：项目与项目之间插入相同距离的空隙
    代码：

    1. <Value title='space-between' value={{flexDirection:'row',justifyContent:'space-between'}}>
    2.     {children}
    3. </Value>

    视图：
    image


    space-around：项目两旁插入相同距离的空隙
    代码：

    1. <Value title='space-around' value={{flexDirection:'row',justifyContent:'space-around'}}>
    2.     {children}
    3. </Value>

    视图：
    image


  3. alignItems：交叉轴方向对齐方式，默认值flex-start，即交叉轴开端

    值 描述
    flex-start 交叉轴开端
    center 交叉轴居中
    flex-end 交叉轴末端


    flex-start：交叉轴开端

    image


    center：交叉轴的中间位置

    image


    flex-end：交叉轴的末端位置

    image


  4. flexWrap：包含内容，默认值是nowrap，不包裹所有内容

    值 描述
    nowrap 项目沿主轴方向布局，超出容器长度的部分不可见
    wrap 项目沿主轴布局所需长度大于容器总长度时，分行布局，所有项目内容都可见


    nowrap：不包裹内容
    代码：

    1. <Value title='nowrap' value={{flexWrap:'nowrap',flexDirection:'row'}}>
    2.       {children}{children}{children}{children}
    3. </Value>

    视图：：
    image


    wrap：包裹内容
    代码：

    1. <Value title='wrap' value={{flexWrap:'wrap',flexDirection:'row'}}>
    2.       {children}{children}{children}{children}
    3. </Value>

    视图：
    image


2.2 项目属性

  1. flex：布局权重

    值 描述
    >=0 项目占位权重，容器包含至少2项目时，项目使用flex属性才有意义


    1:0：flex=0的项目占用空间仅为内容所需空间，flex=1的项目会占据其余所有空间
    代码：

    1. <Value title='1:0' value={{flexDirection:'row'}}>
    2.     <Text style={{color:'white',flex:1,textAlign:'center',backgroundColor:'red',fontSize:20,paddingHorizontal:10}}>flex=1</Text>
    3.     <Text style={{color:'white',textAlign:'center',backgroundColor:'yellow',fontSize:20,paddingHorizontal:10}}>flex=0</Text>
    4. </Value>

    image


    2:1
    代码：

    1. <Value title='2:1' value={{flexDirection:'row'}}>
    2.     <Text style={{color:'white',flex:2,textAlign:'center',backgroundColor:'blue',fontSize:20}}>flex=2</Text>
    3.     <Text style={{color:'white',flex:1,textAlign:'center',backgroundColor:'green',fontSize:20}}>flex=1</Text>
    4. </Value>

    image


    1:1:1:1
    代码：

    1. <Value title='1:1:1:1' value={{flexDirection:'row'}}>
    2.     <Text style={{color:'white',flex:1,textAlign:'center',backgroundColor:'red',fontSize:20}}>flex=1</Text>
    3.     <Text style={{color:'white',flex:1,textAlign:'center',backgroundColor:'yellow',fontSize:20}}>flex=1</Text>
    4.     <Text style={{color:'white',flex:1,textAlign:'center',backgroundColor:'blue',fontSize:20}}>flex=1</Text>
    5.     <Text style={{color:'white',flex:1,textAlign:'center',backgroundColor:'green',fontSize:20}}>flex=1</Text>
    6. </Value>

    image


  2. alignSelf：项目交叉轴方向自身对齐方式

    值 描述
    flex-start 开端
    center 居中
    flex-end 末端

    代码：

    1. <Value title='alignSelf' value={{flexDirection:'row',height:30,alignItems:'center'}}>
    2.       <View style={{alignSelf:'flex-start'}}>
    3.         <Circle/>
    4.       </View>
    5.       <View style={{alignSelf:'flex-end'}}>
    6.         <Circle/>
    7.       </View>
    8.       <View style={{alignSelf:'flex-start'}}>
    9.         <Circle/>
    10.       </View>
    11.       <View style={{alignSelf:'flex-end'}}>
    12.         <Circle/>
    13.       </View>
    14.       <View style={{alignSelf:'flex-start'}}>
    15.         <Circle/>
    16.       </View>
    17. </Value>

    视图：
    image

3 Layout的其他属性

layout除了flex属性之外，当然还有其他属性，同样声明在：/node_modules/react-native/Libraries/StyleSheet/LayoutPropTypes.js

  1.   width: ReactPropTypes.number,
  2.   height: ReactPropTypes.number,
  3.   top: ReactPropTypes.number,
  4.   left: ReactPropTypes.number,
  5.   right: ReactPropTypes.number,
  6.   bottom: ReactPropTypes.number,
  7.   margin: ReactPropTypes.number,
  8.   marginVertical: ReactPropTypes.number,
  9.   marginHorizontal: ReactPropTypes.number,
  10.   marginTop: ReactPropTypes.number,
  11.   marginBottom: ReactPropTypes.number,
  12.   marginLeft: ReactPropTypes.number,
  13.   marginRight: ReactPropTypes.number,
  14.   padding: ReactPropTypes.number,
  15.   paddingVertical: ReactPropTypes.number,
  16.   paddingHorizontal: ReactPropTypes.number,
  17.   paddingTop: ReactPropTypes.number,
  18.   paddingBottom: ReactPropTypes.number,
  19.   paddingLeft: ReactPropTypes.number,
  20.   paddingRight: ReactPropTypes.number,
  21.   borderWidth: ReactPropTypes.number,
  22.   borderTopWidth: ReactPropTypes.number,
  23.   borderRightWidth: ReactPropTypes.number,
  24.   borderBottomWidth: ReactPropTypes.number,
  25.   borderLeftWidth: ReactPropTypes.number,
  27.   position: ReactPropTypes.oneOf([
  28.     'absolute',
  29.     'relative'
  30.   ]),
属性 类型 描述
width number 容器或者项目的宽度
height number 容器或者项目的高度
top,bottom,left,right number 在父容器的上下左右偏移量
margin number 留边，留边的空间不属于容器或者项目自身空间
marginHorizontal number 水平方向留边
marginVertical number 垂直方向留边
padding number 填充，填充的空间输入容器或者项目自身空间
paddingHorizontal number 水平方向填充
paddingVertical number 垂直方向填充
borderWidth number 边界宽度
position enum 位置方式：absolute与relative

position：默认值为relative

值 描述
absolute 绝对布局
relative 相对布局

react的默认位置方式是relative，项目是一个接一个排列下去的，absolute为绝对布局，一般会与left和top属性一起使用。有时候我们需要实现某些项目重叠起来，absolute属性就能发挥作用了，例如下图：

image

react的基本组件暂时不支持以图片作为背景，所以这里的的转入是一个文本组件，而红色的圆形是一个图片组件，在IOS里面组件也可以作为容器，图片可以正常显示，但是在Android里面，可能存在些问题，如果使用组件作为容器都会出现图片变得好奇怪，所以就可以absoulte来解决问题了。代码如下：

  1. <View style={{width:80,height:80,alignItems:'center',justifyContent:'center'}}>
  2.     <Image style={{position:'absolute',left:0,top:0,resizeMode:'contain',width:80,height:80}} source={require('image!finance_usercenter_ic_into')}/>
  3.     <Text style={{width:80,textAlign:'center',color:'white',fontSize:16}}>转入</Text>
  4. </View>

这里的View跟Android的View有点不一样，View是可以作为容器也可以作为项目，View作为容器还有其他很多属性，例如backgroundColor，borderWidth，borderColor，opacity等等，这里不一一介绍。

4 布局的尺寸说明

react native的宽高是不需要带单位的，那些width，height，padding，margin的赋值都直接是数字的，当你设定width:10，在IOS的话就是设置了10pt宽度，而在Android上面是10dp，在做项目时，辛勤的美工会帮我们标出所有UI控件的宽，高，边距等等，他们用的单位也是dp，所以赋值style中宽高时，直接填入数字即可。

5 理财界面实战

先上预览图：
image

  1. TitleBar

    1. 'use strict'
    3. var React = require('react-native');
    4. var {
    5.     Image,
    6.     Text,
    7.     TouchableWithoutFeedback,
    8.     StyleSheet,
    9.     View,
    10. } = React;
    12. var TitleBar = React.createClass({
    13.     getInitialState: function()
    14.     {
    15.         return ({
    16.             loginState:0,
    17.         });
    18.     },
    19.     render: function(){
    20.         return(
    21.             <View style={styles.container}>
    22.                 <Image style={styles.icon} 
    23.                     source={require('image!ic_low_login_head')}/>
    24.                 <Text style={styles.title}>{this.props.title}</Text>
    25.                 <Image style={styles.icon} source={require('image!ic_low_login_news')}/>
    26.             </View>
    27.         );
    28.     },
    29. });
    31. var styles = StyleSheet.create({
    32.     container:{
    33.         flexDirection:'row',
    34.         paddingLeft:16,
    35.         paddingTop:8,
    36.         paddingRight:16,
    37.         paddingBottom:8,
    38.         height:56,
    39.         alignItems:'center',
    40.         backgroundColor:'#63534e'
    41.     },
    42.     icon:{
    43.         resizeMode:'cover',
    44.         width:30,
    45.         height:30,
    46.     },
    47.     title:{
    48.         flex:1,
    49.         marginLeft:10,
    50.         textAlign:'left',
    51.         color:'white',
    52.         fontSize:15,
    53.     },
    54. });
    56. module.exports = TitleBar;

  2. Header

    1. var Header = React.createClass({
    2.     getInitialState:function(){
    3.         return {
    4.             data:{
    5.                 total:2345.67,
    6.                 increasement:0.00,
    7.             },
    8.         };
    9.     },
    10.     render: function(){
    11.         var data = this.state.data;
    12.         var total = data.total;
    13.         var increasement = data.increasement;
    14.         var header = 
    15.         <View style={{flexDirection:'row', alignItems:'center', paddingTop:17,paddingBottom:10,paddingRight:17,backgroundColor:'#63534e'}}>
    16.             <View style={{flex:1, marginLeft:16}}>
    17.                 <Text style={{color:'#9a8f8d',fontSize:13,}}>活期余额(元)</Text>
    18.                 <View style={{flexDirection:'row', alignItems:'flex-start', marginTop:5}}>
    19.                     <Text style={{color:'#ffe7bc',fontSize:32}}>{parseInt(total)+'.'}</Text>
    20.                     <Text style={{color:'#ffe7bc',fontSize:18, marginTop:5}}>{total*100%100}</Text>
    21.                 </View>
    22.                 <Text style={{color:'#9a8f8d',fontSize:10,marginTop:5}}>昨日+{increasement}</Text>
    23.             </View>
    24.             <View style={{width:80,height:80,alignItems:'center',justifyContent:'center'}}>
    25.                 <Image style={{position:'absolute',left:0,top:0,resizeMode:'contain',width:80,height:80}} source={require('image!finance_usercenter_ic_into')}/>
    26.                 <Text style={{width:80,textAlign:'center',color:'white',fontSize:16}}>转入</Text>
    27.             </View>
    28.             <View style={{width:80,height:80,alignItems:'center',justifyContent:'center'}}>
    29.                 <Image style={{position:'absolute',left:0,top:0,resizeMode:'contain',width:80,height:80}} source={require('image!finance_usercenter_ic_out')}/>
    30.                 <Text style={{width:80,textAlign:'center',color:'white',fontSize:16}}>转出</Text>
    31.             </View>
    32.         </View>;
    33.         return header;
    34.     },
    35. });

  3. Insurance

    1. var Insurance = React.createClass({
    2.     fetchData:function(){
    3.         var url = 'http://202.69.27.140/btoa/portal/financial/financialList';
    4.         fetch(url).then((response) => response.json()).then((responseData) => {
    5.             var categoryList = responseData.data.categoryList;
    6.             for(var i=0;i<categoryList.length;i++){
    7.                 var categoryItem = categoryList[i];
    8.                 if(categoryItem.category==='insure'){
    9.                     this.setState({
    10.                         data: this.state.data.cloneWithRows(categoryItem.productList),
    11.                         loaded: true,
    12.                         expanded: true,
    13.                     }); 
    14.                 }
    15.             }
    16.         }).done();
    17.     },
    18.     componentDidMount:function(){
    19.         this.fetchData();
    20.     },
    21.     getInitialState:function(){
    22.         return {
    23.             data:new ListView.DataSource({
    24.                 rowHasChanged:(r1,r2)=>r1!==r2,
    25.             }),
    26.             loaded:false,
    27.             expanded:false,
    28.         };
    29.     },
    30.     renderRow:function(item)
    31.     {
    32.         var price = (item.productTypeID===30014)?'8.5折起':item.minPremium+'~'+item.maxPremium+'元';
    33.         var ensure = (item.productTypeID===30014)?'':parseFloat(item.minEnsure/10000)+'~'+parseFloat(item.maxEnsure/10000)+'万';
    34.         var itemView = 
    35.         <View style={{paddingVertical:15,paddingLeft:17,borderBottomWidth:0.5,borderBottomColor:'#dddddd',backgroundColor:'white'}}>
    36.             <Text style={{color:'#6a534f',fontSize:18}}>{item.productName}</Text>
    37.             <View style={{flexDirection:'row',}}>
    38.                 <Text style={{flex:1,color:'#fc7200',fontSize:24}}>{price}</Text>
    39.                 <Text style={{flex:1,color:'#6a534f',fontSize:24}}>{ensure}</Text>
    40.             </View>
    41.             <Text style={{color:'#a19796',fontSize:12}}>保费</Text>
    42.         </View>;
    43.         return itemView;
    44.     },
    45.     render:function(){
    46.         var listView = <ListView dataSource={this.state.data} renderRow={this.renderRow}/>;
    47.         var moreView = <TouchableWithoutFeedback style={{paddingRight:15}} onPress={()=>{}}>
    48.             <View style={{flexDirection:'row',alignItems:'center',padding:5,height:36}}>
    49.                 <Text style={{color:'#9a8f8d',fontSize:13}}>更多</Text>
    50.                 <Image style={{width:17,height:15,marginLeft:5,resizeMode:'contain'}} source={require('image!finance_more')}/>
    51.             </View>
    52.         </TouchableWithoutFeedback>
    53.         var insurance = 
    54.         <View>
    55.             <TouchableWithoutFeedback onPress={()=>{
    56.                     this.setState({expanded:!this.state.expanded});
    57.                     this.props.onExpand&&this.props.onExpand(this.state.expanded);
    58.                 }}>
    59.                 <View style={{flexDirection:'row',alignItems:'center',borderColor:'#dddddd',borderTopWidth:0.5,borderBottomWidth:0.5,backgroundColor:'white'}}>
    60.                     <Image style={{width:6,height:36,resizeMode:'stretch'}} source={require('image!finance_list_bar_current_deposit_retract')}/>
    61.                     <Text style={{textAlign:'center',fontSize:17,color:'#d78d85',marginLeft:16,}}>保险</Text>
    62.                     <Text style={{fontSize:13,color:'#9a8f8d',marginLeft:5,flex:1}}>保障每一天</Text>
    63.                     {!this.state.expanded&&<Image style={{width:10,height:10,resizeMode:'contain',marginRight:15}} source={require('image!common_ic_more_spread_out')}/>}
    64.                     {this.state.expanded&&moreView}
    65.                 </View>
    66.             </TouchableWithoutFeedback>
    67.             {this.state.expanded&&listView}
    68.         </View>;
    69.         return insurance;
    70.     },
    71. });

  4. Avertisement

    1. var Avertisement = React.createClass({
    2.     render:function()
    3.     {
    4.         var advertisement = 
    5.         <View style={{margin:8,alignItems:'center'}}>
    6.             <TouchableHighlight>
    7.                 <Image style={{resizeMode:'contain',width:344,height:146.7}} source={require('image!finance_banner_001')}/>
    8.             </TouchableHighlight>
    9.             <TouchableHighlight style={{marginTop:8}}>
    10.                 <Image style={{resizeMode:'contain',width:344,height:146.7}} source={require('image!finance_banner_002')}/>
    11.             </TouchableHighlight>
    12.         </View>;
    13.         return advertisement;
    14.     }
    15. });

  5. 整体

    1. var FinanceScreen = React.createClass({
    2.     render:function(){
    3.         return (
    4.             <ScrollView ref={(scrollView)=>{
    5.                 this.scrollView=scrollView;
    6.                 }}>
    7.             <View style={styles.container}>
    8.                 <TitleBar loginState={0} title={'未登录'}/>
    9.                 <Header/>
    10.                 <Insurance onExpand={(expanded)=>{
    11.                 }}/>
    12.                 <Avertisement/>
    13.             </View>
    14.             </ScrollView>
    15.         );
    16.     },
    17. });

  6. TabLayout

    1. 'use strict'
    3. var React = require('react-native');
    5. var {
    6.     Image,
    7.     Text,
    8.     View,
    9.     StyleSheet,
    10.     TouchableWithoutFeedback,
    11.     TouchableOpacity,
    12. } = React;
    14. var iconHome = [require('image!tab_home_normal'),require('image!tab_home_focused')];
    15. var iconFinance = [require('image!tab_finance_normal'),require('image!tab_finance_focused')];
    16. var iconBank = [require('image!tab_bank_normal'),require('image!tab_bank_focused')];
    17. var iconLife = [require('image!tab_life_normal'),require('image!tab_life_focused')];
    18. var iconCredit = [require('image!tab_credit_normal'),require('image!tab_credit_focused')];
    19. var titleHome = '首页';
    20. var titleFinance = '理财';
    21. var titleBank = '银行';
    22. var titleLife = '生活';
    23. var titleCredit = '信用';
    25. var tabArray = [{icon:iconHome,title:titleHome},{icon:iconBank,title:titleBank},{icon:iconFinance,title:titleFinance},
    26.     {icon:iconCredit,title:titleCredit},{icon:iconLife,title:titleLife}];
    28. var TabView = React.createClass({
    29.     _handlePress :function(){
    30.         if(this.props.onPress)
    31.         {
    32.             this.props.onPress();
    33.         }
    34.     },
    35.     render:function(){
    36.         return (
    37.             <TouchableWithoutFeedback onPress={this._handlePress}>
    38.                 <View style={styles.tabViewContainer} on>
    39.                     <Image style={styles.tabViewIcon} 
    40.                     source={this.props.selected?this.props.icon[1]:this.props.icon[0]}/>
    41.                     <Text style={[styles.tabViewText,this.props.selected?styles.tabViewTextFocused:{}]}>{this.props.text}</Text>
    42.                 </View>
    43.             </TouchableWithoutFeedback>
    44.         );
    45.     },
    46. });
    48. var TabLayout = React.createClass({
    49.     select : function(position){
    50.         if(this.state.selected!==position){
    51.             this.setState({selected:position});
    52.         }
    53.     },
    54.     onTabChanged : function(position){
    55.         this.setState({selected:position});
    56.         if(this.props.onTabChanged)
    57.         {
    58.             this.props.onTabChanged(position);
    59.         }
    60.     },
    61.     getInitialState: function(){
    62.         return ({
    63.             selected:0
    64.         });
    65.     },
    66.     render:function(){
    68.         // var tabViews = [];
    69.         // for(var i=0;i<tabArray.length;i++)
    70.         // {
    71.         //  var tab = tabArray[i];
    72.         //  tabViews.push(<TabView icon={tab.icon} text={tab.title} selected={this.state===i} onPress={()=>{
    73.         //      this.state.selected!==i&&this.onTabChanged(i);
    74.         //  }}/>);          
    75.         // }
    77.         return (<View style={styles.tabLayout}>
    78.                 <TabView icon={iconHome} text={titleHome} selected={this.state.selected===0} onPress={()=>{
    79.                     this.state.selected!==0&&this.onTabChanged(0);
    80.                 }}/>
    81.                 <TabView icon={iconBank} text={titleBank} selected={this.state.selected===1} onPress={()=>{
    82.                     this.state.selected!==1&&this.onTabChanged(1);
    83.                 }}/>
    84.                 <TabView icon={iconFinance} text={titleFinance} selected={this.state.selected===2} onPress={()=>{
    85.                     this.state.selected!==2&&this.onTabChanged(2);
    86.                 }}/>
    87.                 <TabView icon={iconCredit} text={titleCredit} selected={this.state.selected===3} onPress={()=>{
    88.                     this.state.selected!==3&&this.onTabChanged(3);
    89.                 }}/>
    90.                 <TabView icon={iconLife} text={titleLife} selected={this.state.selected===4} onPress={()=>{
    91.                     this.state.selected!==4&&this.onTabChanged(4);
    92.                 }}/>
    93.             </View>);
    94.     },
    95. });
    97. var styles = StyleSheet.create({
    98.     tabLayout:{
    99.         flexDirection:'row',
    100.         backgroundColor:'white',
    101.         height:56,
    102.         borderTopColor:'#e8e8e8',
    103.         borderTopWidth:0.5,
    104.         borderBottomWidth:0.5,
    105.         borderBottomColor:'#e8e8e8',
    106.     },
    107.     tabViewContainer:{
    108.         flex:1,
    109.         flexDirection:'column',
    110.         alignItems:'center',
    111.         justifyContent:'center',
    112.     },
    113.     tabViewIcon:{
    114.         width:30,
    115.         height:30,
    116.         resizeMode:'contain',
    117.     },
    118.     tabViewText:{
    119.         color:'#9a8e8c',
    120.         fontSize:13,
    121.         textAlign:'center',
    122.     },
    123.     tabViewTextFocused:{
    124.         color:'#63534e',
    125.     }
    126. });
    128. module.exports = TabLayout;
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注