React Native之盒子模型BoxApp

最新推荐文章于 2021-03-09 14:51:15 发布
最新推荐文章于 2021-03-09 14:51:15 发布
阅读量801 收藏
点赞数
分类专栏： ReactNativ 文章标签： native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26764181/article/details/52425144
版权

盒子模型BoxApp

HTML5实现盒子模型显示

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .height50 {
        height: 50px;
      }
      .height400 {
        height: 400px;
      }
      .height300 {
        height: 300px;
      }
      .height200 {
        height: 200px;
      }
      .height100 {
        height: 100px;
      }
      .width400 {
        width: 400px;
      }
      .bgred {
        background-color: #6AC5AC;
      }
      .bggreen {
        background-color:  #414142;
      }
      .bgyellow {
        background-color: #D64078;
      }
      .box {
        display: flex;
        flex-direction: column;
        flex: 1;
        position: relative;
        color: #FDC72F;
        line-height: 1em;
      }
      .label {
        top: 0;
        left: 0;
        padding: 0 3px 3px 0;
        position: absolute;
        background-color: #FDC72F;
        color: white;
        line-height: 1em;
      }
      .top {
        width: 100%;
        justify-content: center;
        display: flex;
        align-items: center;
      }
      .bottom {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .right {
        width: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
      .left {
        width: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
      .heightdashed {
        position: absolute;
        right: 20px;
        height: 100%;
        border-left: 1px solid #FDC72F;
      }
      .widthdashed {
        position: absolute;
        left: 0px;
        width: 100%;
        bottom: 24px;
        border-top: 1px solid #FDC72F;
      }
      .margginBox {
        position:absolute;
        top: 100px;
        padding-left:7px;
        padding-right:7px;
      }
      .borderBox {
        flex: 1;
        display: flex;
        justify-content: space-between;
      }
      .paddingBox {
        flex: 1;
        display: flex;
        justify-content: space-between;
      }
      .elementBox{
        flex: 1;
        display: flex;
        justify-content: space-between;
      }
      .measureBox {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
      }
    </style>
  </head>
  <body>
    <span class="margginBox">
      <span class="box height400  width400">
        <span class="label">
          margin
        </span>
        <span class="top height50 bgred">
          top
        </span>
        <span class="borderBox">
          <span class="left bgred">
            left
          </span>
          <span class="box height300  ">
            <span class="label">
              border
            </span>
            <span class="top height50 bggreen">
              top
            </span>
            <span class="paddingBox">
              <span class="left bggreen">
                left
              </span>
              <span class="box height200  ">
                <span class="label">
                  padding
                </span>
                <span class="top height50 bgyellow">
                  top
                </span>
                <span class="elementBox">
                  <span class="left bgyellow">
                    left
                  </span>
                  <span class="box height100  ">
                    <span class="label">
                      element
                    </span>
                    <span class="widthdashed">
                    </span>
                    <span class="heightdashed">
                    </span>
                    <span class="measureBox">
                      <span class="right">
                        height
                      </span>
                    </span>
                    <span class="bottom  height50">
                      width
                    </span>
                  </span>
                  <span class="right bgyellow">
                    right
                  </span>
                </span>
                <span class="bottom  height50 bgyellow">
                  bottom
                </span>
              </span>
              <span class="right bggreen">
                right
              </span>
            </span>
            <span class="bottom  height50 bggreen">
              bottom
            </span>
          </span>
          <span class="right bgred">
            right
          </span>
        </span>
        <span class="bottom  height50 bgred">
          bottom
        </span>
      </span>
    </span>
  </body>
</html>

React Native实现盒子模型显示

  • 类似HTML写法
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View
} from 'react-native';

class DongFang extends Component {
  render() {
    return (
        <View style={[BoxStyles.margginBox]}  ref="lab1">
          <View style={[BoxStyles.box,BoxStyles.height400,BoxStyles.width400]}>
            <View style={[BoxStyles.top,BoxStyles.height50,BoxStyles.bgred]}>
              <Text style={BoxStyles.yellow}>top</Text></View>
            <View style={[BoxStyles.borderBox]}>
              <View style={[BoxStyles.left,BoxStyles.bgred]} >
                <Text style={BoxStyles.yellow}>left</Text></View>
              <View style={[BoxStyles.box,BoxStyles.height300]}>
                <View style={[BoxStyles.top,BoxStyles.height50,BoxStyles.bggreen]}>
                  <Text style={BoxStyles.yellow}>top</Text></View>
                <View style={[BoxStyles.paddingBox]}>
                  <View style={[BoxStyles.left,BoxStyles.bggreen]} >
                    <Text style={BoxStyles.yellow}>left</Text></View>
                  <View style={[BoxStyles.box,BoxStyles.height200]}>
                    <View style={[BoxStyles.top,BoxStyles.height50,BoxStyles.bgyellow]}>
                      <Text style={BoxStyles.yellow}>top</Text></View>
                    <View style={[BoxStyles.elementBox]}>
                      <View style={[BoxStyles.left,BoxStyles.bgyellow]} >
                        <Text style={BoxStyles.yellow}>left</Text></View>
                      <View style={[BoxStyles.box,BoxStyles.height100]}>
                        <View  style={[BoxStyles.label]}>
                          <Text style={BoxStyles.white}>element</Text></View>
                        <View style={[BoxStyles.widthdashed]} ></View>
                        <View style={[BoxStyles.heightdashed]} ></View>
                        <View style={[BoxStyles.measureBox]} >
                          <View style={[BoxStyles.right]}>
                            <Text style={[BoxStyles.yellow]}>height</Text></View>
                        </View>
                        <View style={[BoxStyles.bottom,BoxStyles.height50]}>
                          <Text style={BoxStyles.yellow}>width</Text></View>
                      </View>
                      <View style={[BoxStyles.right,BoxStyles.bgyellow]}><Text style={BoxStyles.yellow}>right</Text></View>
                    </View>
                    <View style={[BoxStyles.bottom,BoxStyles.height50,BoxStyles.bgyellow]}>
                      <Text style={BoxStyles.yellow}>bottom</Text></View>
                    <View style={[BoxStyles.label]}>
                      <Text style={BoxStyles.white}>padding</Text></View>
                  </View>
                  <View style={[BoxStyles.right,BoxStyles.bggreen]}><Text style={BoxStyles.yellow}>right</Text></View>
                </View>
                <View style={[BoxStyles.bottom,BoxStyles.height50,BoxStyles.bggreen]}>
                  <Text style={BoxStyles.yellow}>bottom</Text></View>
                <View style={[BoxStyles.label]}><Text style={BoxStyles.white}>border</Text></View>
              </View>
              <View style={[BoxStyles.right,BoxStyles.bgred]}>
                <Text style={BoxStyles.yellow}>right</Text></View>
            </View>
            <View style={[BoxStyles.bottom,BoxStyles.height50,BoxStyles.bgred]}>
              <Text style={BoxStyles.yellow}>bottom</Text></View>
            <View style={[BoxStyles.label]} ><Text style={BoxStyles.white}>margin</Text></View>
          </View>
        </View>
    );
  }
}

const BoxStyles = StyleSheet.create({
  height50:{
    height: 50,
  },
  height400:{
    height: 400,
  },
  height300:{
    height: 300,
  },
  height200:{
    height: 200,
  },
  height100:{
    height: 100,
  },
  width400:{
    width: 400,
  },
  width300:{
    width: 300,
  },
  width200:{
    width: 200,
  },
  width100:{
    width: 100,
  },
  bgred: {
    backgroundColor:'#6AC5AC',
  },
  bggreen: {
    backgroundColor: '#414142',
  },
  bgyellow: {
    backgroundColor: '#D64078',
  },
  box: {
    flexDirection: 'column',
    flex: 1,
    position: 'relative',
  },
  label: {
    top: 0,
    left: 0,
    paddingTop: 0,
    paddingRight: 3,
    paddingBottom: 3,
    paddingLeft: 0,
    position: 'absolute',
    backgroundColor: '#FDC72F',
  },
  top: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  bottom: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  right: {
    width: 50,
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  left: {
    width: 50,
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  heightdashed: {
    bottom: 0,
    top: 0,
    right: 20,
    borderLeftWidth: 1,
    position: 'absolute',
    borderLeftColor: '#FDC72F',
  },
  widthdashed: {
    bottom: 25,
    left: 0,
    right: 0,
    borderTopWidth: 1,
    position: 'absolute',
    borderTopColor: '#FDC72F',
  },
  yellow: {
    color: '#FDC72F',
    fontWeight:'900',
  },
  white: {
    color: 'white',
    fontWeight:'900',
  },
  margginBox:{
    position: 'absolute',
    top: 100,
    paddingLeft:7,
    paddingRight:7,
  },
  borderBox:{
    flex: 1,
    justifyContent: 'space-between',
    flexDirection: 'row',
  },
  paddingBox:{
    flex: 1,
    justifyContent: 'space-between',
    flexDirection: 'row',
  },
  elementBox:{
    flex: 1,
    justifyContent: 'space-between',
    flexDirection: 'row',
  },
  measureBox:{
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems:'flex-end',
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('DongFang', () => DongFang);
  • ReactJs写法
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View
} from 'react-native';

class Box extends Component{
  render(){
  return (
      <View style={[BoxStyles.box,BoxStyles[this.props.width],BoxStyles[this.props.height]]}>
        <View  style={[BoxStyles.top,BoxStyles.height50,BoxStyles[this.props.classBg]]}><Text>top</Text></View>
        <View style={[BoxStyles[this.props.childName]]}>
          <View style={[BoxStyles.left,BoxStyles[this.props.classBg]]}><Text>left</Text></View>
          {this.props.children}
          <View style={[BoxStyles.right,BoxStyles[this.props.classBg]]}><Text>right</Text></View>
        </View>
        <View style={[BoxStyles.bottom,BoxStyles.height50,BoxStyles[this.props.classBg]]}><Text>bottom</Text></View>
        <View style={[BoxStyles.label]}><Text>{this.props.boxName}</Text></View>
      </View>
  )
}
}

class MargginBox extends Component{
  render(){
  return (
      <View style={[BoxStyles.margginBox]}>
        <Box  childName="borderBox"  height="height400" width="width400" boxName="margin" classBg="bgred">{this.props.children}</Box>
      </View>
  )
}

}


class BorderBox extends Component{
  render(){
  return (
      <Box childName="paddingBox"  height="height300" width="width300" boxName="border" classBg="bggreen" >{this.props.children}</Box>
  )
}

}

class PaddingBox extends Component{
  render(){
  return (
      <Box childName="elementBox"  height="height200" width="width200" boxName="padding" classBg="bgyellow" >{this.props.children}</Box>
  )
}
}

class ElementBox extends Component{
  render(){
  return (
      <View style={[BoxStyles.box,BoxStyles.height100]}>
        <View style={[BoxStyles.measureBox]}>
          <View style={[BoxStyles.right]}><Text>height</Text></View>
        </View>
        <View style={[BoxStyles.bottom,BoxStyles.height50]} ><Text>width</Text></View>
        <View style={[BoxStyles.label]}><Text>element</Text></View>
        <View style={[BoxStyles.widthdashed]}></View>
        <View style={[BoxStyles.heightdashed]}></View>
      </View>
  )
}
}

class DongFang extends Component {
  render(){
  return (
      <MargginBox>
        <BorderBox>
          <PaddingBox>
            <ElementBox>
            </ElementBox>
          </PaddingBox>
        </BorderBox>
      </MargginBox>
  )
}
}

const BoxStyles = StyleSheet.create({
  height50:{
    height: 50,
  },
  height400:{
    height: 400,
  },
  height300:{
    height: 300,
  },
  height200:{
    height: 200,
  },
  height100:{
    height: 100,
  },
  width400:{
    width: 400,
  },
  width300:{
    width: 300,
  },
  width200:{
    width: 200,
  },
  width100:{
    width: 100,
  },
  bgred: {
    backgroundColor:'#6AC5AC',
  },
  bggreen: {
    backgroundColor: '#414142',
  },
  bgyellow: {
    backgroundColor: '#D64078',
  },
  box: {
    flexDirection: 'column',
    flex: 1,
    position: 'relative',
  },
  label: {
    top: 0,
    left: 0,
    paddingTop: 0,
    paddingRight: 3,
    paddingBottom: 3,
    paddingLeft: 0,
    position: 'absolute',
    backgroundColor: '#FDC72F',
  },
  top: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  bottom: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  right: {
    width: 50,
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  left: {
    width: 50,
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  heightdashed: {
    bottom: 0,
    top: 0,
    right: 20,
    borderLeftWidth: 1,
    position: 'absolute',
    borderLeftColor: '#FDC72F',
  },
  widthdashed: {
    bottom: 25,
    left: 0,
    right: 0,
    borderTopWidth: 1,
    position: 'absolute',
    borderTopColor: '#FDC72F',
  },
  yellow: {
    color: '#FDC72F',
    fontWeight:'900',
  },
  white: {
    color: 'white',
    fontWeight:'900',
  },
  margginBox:{
    position: 'absolute',
    top: 100,
    paddingLeft:7,
    paddingRight:7,
  },
  borderBox:{
    flex: 1,
    justifyContent: 'space-between',
    flexDirection: 'row',
  },
  paddingBox:{
    flex: 1,
    justifyContent: 'space-between',
    flexDirection: 'row',
  },
  elementBox:{
    flex: 1,
    justifyContent: 'space-between',
    flexDirection: 'row',
  },
  measureBox:{
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems:'flex-end',
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
AppRegistry.registerComponent('DongFang', () => DongFang);
星空守候
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
创建自己的盒子box_创建自己的
weixin_26737625的博客
08-25 2万+
创建自己的盒子boxNote from author : 作者注： In this article we will learn how to create your own WhatsApp sticker using python. We will also understand the fundamentals behind creating stickers, instead of doi...
reactNative之Webview与h5互调
03-26
在React Native开发中，Webview组件是一个非常关键的组成部分，它允许我们集成H5页面到原生应用中，实现原生应用与Web内容的交互。本文将深入探讨React Native中的Webview与H5的互调机制，以及如何利用它们来增强...
React Native中的弹性盒模型(Flexbox)
ABang的博客
06-26 515
尊重原版：原链接。        要说移动端最近有什么比较好的技术出现，那么React Native绝对算其中的一个。Learn Once,Write Anywhere，其概念还是十分吸引人的。对那些缺少Native开发(Android,IOS)人员的小公司来说，React Native可以算的上一个很好的解决方案。自己最近也在看React Native，经过几周的阅读研究，发现如果你没
React Native的 弹性盒模型
qq_38719039的博客
03-26 265
1.主轴的方向不是固定的，可能是横向，也可能是纵向，和布局的方向一致。flex: 1, 表示均分。2. 要说明一下：  不管主轴的方向是横还是纵，justifyCentent 始终表示主轴上的对齐方式；alignItems  始终表示交叉轴上的对齐方式。（React样式表中属性全部以小驼峰命名。）...
React-Native之flexbox布局篇
热门推荐
u014486880的博客
05-12 2万+
这篇博客稍微讲解下React-Native中的布局。比较简单。RN的而布局是用css中的flexbox布局，所以布局起来与android传统的布局样式有点像。接下来就结合图片一起来看看。常用属性讲解RN的flexbox主要有以下几个属性alignItems，alignSelf，flex，flexDirection，flexWrap，justifyContent。flexDirection该属性用于指
ReactNative—FlexBox
大家好，我是一个软妹子—贰小妹
01-25 218
大家好，我是贰小妹，希望我的博客可以帮到你。 一、FlexBox布局 1.1 FlexBox是什么意思呢？ flexible（形容词）：能够伸缩或者很容易变化，以适应外界条件的变化 box（名词）：通用的矩形容器 1.2 什么是FlexBox布局? 弹性盒模型（The Flexible Box Module）,又叫Flexbox，意为“弹性布局”，旨在通过弹性的方式来对齐和分布容器中内容的...
React Native 的 WiFi 连接管理器
06-08
React Native 的 WiFi 管理器 (react-native-wifi-manager) 列出、连接并获取设备上 WiFi 连接的状态。 安装 首先需要安装 react-native-wifi-manager: npm install react-native-wifi-manager --save 在 android/...
react-native-formo：为React Native构建基于模型的简单表单
02-12
为React Native构建基于模型的简单表单 目的 在React Native上生成跨平台移动表单字段 跟踪状态和值的能力 用预定义值加载表单 支持嵌套表格和验证 入门 安装 npm i react-native-form0 --save 用法 将表单架构定义...
React Native 计算器和计算器输入组件
06-08
安装使用 npm: npm i -S react-native-calculator 或 yarn: yarn add react-native-calculator Demo Calculator Component Usage import React from 'react' import { View } from 'react-native' import { ...
react-native-performance：监视和衡量React Native性能
02-05
React Native Performance工具用于在开发，管道和生产中测量和监视React Native应用性能的工具链。配套 用于React Native的实现。 与React.Profiler API很好地集成跟踪应用程序中的任意事件，例如组件渲染时间捕获...
drizzle:React性的以太坊dapp UI套件
05-07
注意：此monorepo与我们的1.5.0的@drizzle范围软件包发行版一致。 如果您正在寻找我们的老毛毛雨回购仓库，那么它已经移到了。 概述 Drizzle是一个库集合，可简化使用Plain JavaScript，React和Vue开发dapp的过程。 ：-是Drizzle的状态管理员。 它处理用于Web3连接的样板，以同步智能合约状态和事件。 ：-为React项目定义了Drizzle Provider。 ：-是原始Web控件的集合，这些控件将Smart Contract数据类型转换为相应的html控件。 这是使用React在浏览器上可视化Contract数据的最快方法！ ：-一个Vue适配器和html控件集合，这些将使您的Vue dappSwift启动并运行！ 为drizzle贡献 感谢您抽出宝贵时间来帮助和改善drizzle ！ :party_popper: 以下是drizzle贡献的
React Native 入门（九） - Flexbox 弹性盒子布局
王小北的技术博客
10-27 1618
当前 RN 版本：0.49 操作环境：Windows 10 React Native 使用 Flexbox 的规则来指定某个组件的子元素的布局方式，这种方式可以在不同屏幕尺寸的设备上提供一致的布局结构。React Native 中的 Flexbox 的工作原理和 web 上的 CSS 存在一定的差异：在 RN 中 flexDirection 的默认值是 column 而不是 row，而且
React Native flexBox布局（一）
星宇大前端
08-03 1009
序：     布局想必大家都知道，在iOS 中我们使用代码计算屏幕宽高布局，使用Autoresizing和AutoLayout进行布局。 JSX是什么
ReactNative入门教程-Flexbox布局
wayne214的博客
11-26 235
ReactNative在进行页面UI编写的时候采用的事Flexbox布局，俗称“弹性盒子”。 使用Flexbox可以在不同的屏幕尺寸上提供一致性的布局结构。 很多时候，使用其中的flexDirection、alignItems、justifyContent这个三个样式属性就能够满足大部分的布局需求。 Flex简介 Flex又叫弹性布局，会把当前组件看做一个容器，他的所有子组件都是他容器中的成员，通...
react-native flexbox布局
王明晓的博客
05-21 277
flexbox布局建议看阮一峰大神的flex布局教程rn目前主要支持flexbox的如下六个属性alignItems：用来定义伸缩项目在交叉轴上的对齐方式，语法为：alignItems:flex-start（默认值）| flex-end | center | stretchalignSelf：用来定义单独的伸缩项目在交叉轴上的对齐方式，可以覆盖alignItems,语法为：alignSelf:au...
6、制作自己的box
weixin_33994444的博客
09-08 1308
1. 基于已存在的base镜像创建boxvagrantpackage ==>输出如下 ==>default:AttemptinggracefulshutdownofVM... ==>default:Clearinganypreviouslysetforwardedports... ==>default:Exporting...
5、手把手教React Native实战之盒子模型BoxApp
weixin_30566063的博客
07-03 215
用HTML5和React Native分别实现盒子模型显示 写法不一样： 1.样式 ![样式不同](http://image17-c.poco.cn/mypoco/myphoto/20160323/00/17351665220160323002240032.png?854x367_130) 2.元素 ![元素不同](http://image17-c.poc...
使用 VirtualBox 制作自己的 Vagrant box
小菜的博客
03-09 2917
<div class="toc-wraper ui card column author-box grid pt-2" style="display:none"> <a href="javascript:void(0);" class="close-toc pull-right" style="width: 20px;position: absolute;right: 7px;top: 3px;ma...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值