ReactNative--View组件
在web开发中,div是一个重要的元素,是页面布局的基础
在ReactNative开发中,View组件的作用类似于div。是最基本的组件,被看做是容器组件
var Flexbox = React.createClass({ render:function () { return ( <View style={[styles.container,styles.flex]}> <View style={styles.item}> <View style={[styles.flex,styles.center]}> <Text>酒店</Text> </View> <View style={[styles.flex,styles.lineLeftRight]}> <View style={[styles.flex, styles.center, styles.lineCenter]}> <Text>海外酒店</Text> </View> <View style={[styles.flex, styles.center]}> <Text>特价酒店</Text> </View> </View> <View style={styles.flex}> <View style={[styles.flex, styles.center,styles.lineCenter]}> <Text>团购</Text> </View> <View style={[styles.flex, styles.center]}> <Text>民宿,客栈</Text> </View> </View> </View> </View> ); } }); var styles = StyleSheet.create({ container:{ marginTop:25, backgroundColor:"#f2f2f2", }, //多个子组件都需要 flex:{ flex:1 }, //多子组件都需要 center:{ justifyContent:"center", alignItems:"center", }, item:{ flexDirection:"row", backgroundColor:"#ff607c", marginTop:5, marginLeft:5, marginRight:5, height:80, borderRadius:5 }, //给中间的区域设置左右边线 lineLeftRight:{ borderLeftWidth:1, borderRightWidth:1, borderColor:"white" }, //给上半区域设置下边线 lineCenter:{ borderBottomWidth:1, borderColor:"white" } });