RN控件之View Text

 1 /**
 2  * 模仿美团首页部分
 3  * */
 4 ‘use strict‘
 5 import React,{
 6     AppRegistry,
 7     Component,
 8     StyleSheet,
 9     Text,
10     View,
11     Image,
12 } from ‘react-native‘;
13 
14 class TestImage extends Component {
15   render(){
16     return(
17         <View style={styles.containerStyle}>
18 
19           <View style={{flexDirection:‘row‘}}>
20                 <View style={{width:70}}>
21                 <Image source={require(‘./images/1.png‘)}
22                 style={styles.imageStyle}/>
23                 <Text style={styles.textStyle}>美食</Text>
24                 </View>
25                 <View style={{width:70}}>
26                 <Image source={require(‘./images/2.png‘)}
27                        style={styles.imageStyle}/>
28                 <Text style={styles.textStyle}>酒店</Text>
29               </View>
30               <View style={{width:70}}>
31                 <Image source={require(‘./images/3.png‘)}
32                 style={styles.imageStyle}/>
33                 <Text style={styles.textStyle}>电影</Text>
34               </View>
35               <View style={{width:70}}>
36                 <Image source={require(‘./images/4.png‘)}
37                 style={styles.imageStyle}/>
38                 <Text style={styles.textStyle}>旅游</Text>
39               </View>
40           </View>
41           <View style={{flexDirection:‘row‘,marginTop:10}}>
42                 <View style={{width:70}}>
43                   <Image source={require(‘./images/5.png‘)}
44                   style={styles.imageStyle}/>
45                   <Text style={styles.textStyle}>外卖</Text>
46                 </View>
47                 <View style={{width:70}}>
48                   <Image source={require(‘./images/6.png‘)}
49                   style={styles.imageStyle}/>
50                   <Text style={styles.textStyle}>周边游</Text>
51                 </View>
52               <View style={{width:70}}>
53                 <Image source={require(‘./images/7.png‘)}
54                        style={styles.imageStyle}/>
55                 <Text style={styles.textStyle}>休闲娱乐</Text>
56               </View>
57               <View style={{width:70}}>
58                 <Image source={require(‘./images/8.png‘)}
59                        style={styles.imageStyle}/>
60                 <Text style={styles.textStyle}>今日新单</Text>
61               </View>
62           </View>
63       </View>
64   );
65 
66   }
67 }
68 const styles=StyleSheet.create(
69 
70     {
71       imageStyle:{
72         alignSelf:‘center‘,
73         width:45,
74         height:45
75       },
76       textStyle:{
77         marginTop:5,
78         textAlign:‘center‘,
79         fontSize:11,
80         color:‘#555555‘
81       },
82       containerStyle:{
83         marginLeft:5,
84         marginTop:10,
85         marginRight:5
86       }
87 
88     }
89 );
90 //第一个参数是package中name,第二个参数是需要注册的组件
91 AppRegistry.registerComponent(‘MyProject‘,() =>TestImage);