【原创】东方耀reactnative 视频12之-view组件

ctrip

步骤
1.加载view组件
adb shell input keyevent 82 调出android模拟器的开发选择项目，选择实时刷新
2 创建组件

3 添加样式表

4 注册入口

5 外层布局
三个

6 flexbox水平三栏布局
外联样式 : style={styles.container}
内联样式:
多个
style={
[styles.container,styles.flex,
{borderWidth:1}]
}

7 上下两栏布局

8 完善效果

最终代码

/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/

import React, { Component } from ‘react’;
import {
AppRegistry,
StyleSheet,
Text,
PixelRatio,
View
} from ‘react-native’;

class demo extends Component {
render() {
return (



酒店

    <View style={[styles.item,styles.lineLeftRight]}>
      <View style={[styles.flex,styles.center,styles.lineCenter]}> 
       <Text style={styles.font}>海外酒店</Text>
       </View>
      <View style={[styles.flex,styles.center]}> 
       <Text style={styles.font}>特惠酒店</Text>
       </View>

    </View>
    <View style={styles.item}>
      <View style={[styles.flex,styles.center,styles.lineCenter]}> 
       <Text style={styles.font} >团购</Text>
       </View>
      <View style={[styles.flex,styles.center]}> 
       <Text style={styles.font}>客栈，公寓</Text>
       </View>
       </View>
  </View>
  </View>
);

}
}

const styles = StyleSheet.create({
container: {
marginTop:200,
marginLeft:5,
marginRight:5,
height:84,

flexDirection: 'row',
borderRadius:5,
padding:2,

backgroundColor: '#ff0067',

},
item:{
flex:1,
height:80,

},
center:{
justifyContent:’center’,
alignItems:’center’,
},
flex:{
flex:1,
},
font:{
color:’#fff’,
fontSize:16,
fontWeight:’bold’
},
lineLeftRight:{
borderLeftWidth: 1/PixelRatio.get(),
borderRightWidth: 1/PixelRatio.get(),
borderColor: ‘#fff’,
},
lineCenter:{
borderBottomWidth:1/PixelRatio.get(),
borderColor:’#fff’
},
});

AppRegistry.registerComponent(‘demo’, () => demo);

>