View

Posted 2020-10-16 Da雪山

export default class App extends Component<> {
  render() {
    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>
                <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",
    backgroundColr:"#FF607C",
    marginTop:5,
    marginLeft:5,
    marginRight:5,
    height:80,
    borderRadius:5
  },
  //给中间的区域设置左右边线
  lineLeftRight:{
    borderLeftWidth:1,
    borderRightWidth:1,
    borderColor:"white"
  },
  //给上半区域设置下边线
  lineCenter:{
    borerBottonWidth:1,
    borderColor:"white"

  }

});