React-Native（四）：React Native之View学习

React Native实现以下布局效果:携html5(http://m.ctrip.com/html5/)

基于HelloWord修改项目代码：

  1 /**
  2  * Sample React Native App
  3  * https://github.com/facebook/react-native
  4  * @flow
  5  */
  6 
  7 import React, { Component } from 'react';
  8 import {
  9   AppRegistry,
 10   StyleSheet,
 11   PixelRatio,
 12   Text,
 13   View
 14 } from 'react-native';
 15 
 16 export default class HelloWord extends Component {
 17   render() {
 18     return ( 
 19       <View style={styles.body}>
 20         <View style={[styles.container,styles.redColor]}>
 21           <View style={[styles.item,styles.center]}>
 22             <Text style={styles.font}>酒 店</Text>
 23           </View>
 24           <View style={[styles.item,styles.leftRightLine]}>
 25             <View style={[styles.center,styles.flex,styles.bottonLine]}>
 26               <Text style={styles.font}>海外酒店</Text>
 27             </View> 
 28             <View style={[styles.center,styles.flex]}>
 29               <Text style={styles.font}>特价酒店</Text>
 30             </View>
 31           </View>
 32           <View style={[styles.item]}>
 33             <View style={[styles.center,styles.flex,styles.bottonLine]}>
 34               <Text style={styles.font}>团购</Text>
 35             </View> 
 36             <View style={[styles.center,styles.flex]}>
 37               <Text style={styles.font}>民宿*客栈</Text>
 38             </View>
 39           </View>
 40         </View> 
 41 
 42         <View style={[styles.container,styles.blueColor]}>
 43           <View style={[styles.item,styles.center]}>
 44             <Text style={styles.font}>机 票</Text>
 45           </View>
 46           <View style={[styles.item,styles.leftRightLine]}>
 47             <View style={[styles.center,styles.flex,styles.bottonLine]}>
 48               <Text style={styles.font}>火车票·抢票</Text>
 49             </View> 
 50             <View style={[styles.center,styles.flex]}>
 51               <Text style={styles.font}>特价机票</Text>
 52             </View>
 53           </View>
 54           <View style={[styles.item]}>
 55             <View style={[styles.center,styles.flex,styles.bottonLine]}>
 56               <Text style={styles.font}>汽车票·船票</Text>
 57             </View> 
 58             <View style={[styles.center,styles.flex]}>
 59               <Text style={styles.font}>专车·租车</Text>
 60             </View>
 61           </View>
 62         </View> 
 63 
 64 
 65         <View style={[styles.container,styles.greenColor]}>
 66           <View style={[styles.item,styles.center]}>
 67             <Text style={styles.font}>旅 游</Text>
 68           </View>
 69           <View style={[styles.item,styles.leftRightLine]}>
 70             <View style={[styles.center,styles.flex,styles.bottonLine]}>
 71               <Text style={styles.font}>目的地攻略</Text>
 72             </View> 
 73             <View style={[styles.center,styles.flex]}>
 74               <Text style={styles.font}>周边游</Text>
 75             </View>
 76           </View>
 77           <View style={[styles.item]}>
 78             <View style={[styles.center,styles.flex,styles.bottonLine]}>
 79               <Text style={styles.font}>邮轮旅行</Text>
 80             </View> 
 81             <View style={[styles.center,styles.flex]}>
 82               <Text style={styles.font}>定制旅行</Text>
 83             </View>
 84           </View>
 85         </View> 
 86         
 87         <View style={[styles.container,styles.yellowColor]}>
 88           <View style={styles.item}>
 89             <View style={[styles.center,styles.flex,styles.bottonLine]}>
 90               <Text style={styles.font}>景点·玩乐</Text>
 91             </View> 
 92             <View style={[styles.center,styles.flex]}>
 93               <Text style={styles.font}>礼品卡</Text>
 94             </View>
 95           </View>
 96           <View style={[styles.item,styles.leftRightLine]}>
 97             <View style={[styles.center,styles.flex,styles.bottonLine]}>
 98               <Text style={styles.font}>美食林</Text>
 99             </View> 
100             <View style={[styles.center,styles.flex]}>
101               <Text style={styles.font}>WiFi·电话卡</Text>
102             </View>
103           </View>
104           <View style={[styles.item]}>
105             <View style={[styles.center,styles.flex,styles.bottonLine]}>
106               <Text style={styles.font}>购物·信用卡</Text>
107             </View> 
108             <View style={[styles.center,styles.flex]}>
109               <Text style={styles.font}>保险·签证</Text>
110             </View>
111           </View>
112         </View>    
113 
114       </View>
115     );
116   }
117 }
118 
119 const styles = StyleSheet.create({
120   body:{
121     flex:1,
122   },
123   flex:{
124     flex:1,
125   },
126   container: {
127     marginTop:1,
128     marginLeft:1,
129     marginRight:1,
130     height:84,
131     flexDirection:'row',
132     borderRadius:5,
133     padding:2,
134   },
135   redColor:{
136     backgroundColor:'#FF0067',
137   },
138   blueColor:{
139     backgroundColor:'#3d98ff',
140   },
141   greenColor:{
142     backgroundColor:'#44c522',
143   },
144   yellowColor:{
145     backgroundColor:'#fc9720',
146   },
147   item:{
148     flex:1,
149     height:80,
150   },
151   center:{
152     justifyContent:'center',
153     alignItems:'center',
154   },
155   font:{
156     color:'#fff',
157     fontSize:16,
158     fontWeight:'bold',
159   },
160   leftRightLine:{
161     borderLeftWidth:1/PixelRatio.get(),
162     borderRightWidth:1/PixelRatio.get(),
163     borderColor:'#fff',
164   },
165   bottonLine:{
166     borderBottomWidth:1/PixelRatio.get(),
167     borderColor:'#fff',
168   },
169   
170 });
171 
172 AppRegistry.registerComponent('HelloWord', () => HelloWord);

 

最终运行效果：

 

posted @ 2017-08-09 17:35  cctext  阅读(535)  评论(0)  编辑  收藏  举报