• React Native之盒子模型BoxApp

    盒子模型BoxApp

    HTML5实现盒子模型显示

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <metacharset="utf-8">
    5. <title></title>
    6. <style>
    7. .height50 {
    8. height:50px;
    9. }
    10. .height400 {
    11. height:400px;
    12. }
    13. .height300 {
    14. height:300px;
    15. }
    16. .height200 {
    17. height:200px;
    18. }
    19. .height100 {
    20. height:100px;
    21. }
    22. .width400 {
    23. width:400px;
    24. }
    25. .bgred {
    26. background-color:#6AC5AC;
    27. }
    28. .bggreen {
    29. background-color:#414142;
    30. }
    31. .bgyellow {
    32. background-color:#D64078;
    33. }
    34. .box {
    35. display: flex;
    36. flex-direction: column;
    37. flex:1;
    38. position: relative;
    39. color:#FDC72F;
    40. line-height:1em;
    41. }
    42. .label {
    43. top:0;
    44. left:0;
    45. padding:03px3px0;
    46. position: absolute;
    47. background-color:#FDC72F;
    48. color: white;
    49. line-height:1em;
    50. }
    51. .top {
    52. width:100%;
    53. justify-content: center;
    54. display: flex;
    55. align-items: center;
    56. }
    57. .bottom {
    58. width:100%;
    59. display: flex;
    60. justify-content: center;
    61. align-items: center;
    62. }
    63. .right {
    64. width:50px;
    65. display: flex;
    66. justify-content: space-around;
    67. align-items: center;
    68. }
    69. .left {
    70. width:50px;
    71. display: flex;
    72. justify-content: space-around;
    73. align-items: center;
    74. }
    75. .heightdashed {
    76. position: absolute;
    77. right:20px;
    78. height:100%;
    79. border-left:1px solid #FDC72F;
    80. }
    81. .widthdashed {
    82. position: absolute;
    83. left:0px;
    84. width:100%;
    85. bottom:24px;
    86. border-top:1px solid #FDC72F;
    87. }
    88. .margginBox {
    89. position:absolute;
    90. top:100px;
    91. padding-left:7px;
    92. padding-right:7px;
    93. }
    94. .borderBox {
    95. flex:1;
    96. display: flex;
    97. justify-content: space-between;
    98. }
    99. .paddingBox {
    100. flex:1;
    101. display: flex;
    102. justify-content: space-between;
    103. }
    104. .elementBox{
    105. flex:1;
    106. display: flex;
    107. justify-content: space-between;
    108. }
    109. .measureBox {
    110. flex:1;
    111. display: flex;
    112. justify-content: flex-end;
    113. align-items: flex-end;
    114. }
    115. </style>
    116. </head>
    117. <body>
    118. <spanclass="margginBox">
    119. <spanclass="box height400 width400">
    120. <spanclass="label">
    121. margin
    122. </span>
    123. <spanclass="top height50 bgred">
    124. top
    125. </span>
    126. <spanclass="borderBox">
    127. <spanclass="left bgred">
    128. left
    129. </span>
    130. <spanclass="box height300 ">
    131. <spanclass="label">
    132. border
    133. </span>
    134. <spanclass="top height50 bggreen">
    135. top
    136. </span>
    137. <spanclass="paddingBox">
    138. <spanclass="left bggreen">
    139. left
    140. </span>
    141. <spanclass="box height200 ">
    142. <spanclass="label">
    143. padding
    144. </span>
    145. <spanclass="top height50 bgyellow">
    146. top
    147. </span>
    148. <spanclass="elementBox">
    149. <spanclass="left bgyellow">
    150. left
    151. </span>
    152. <spanclass="box height100 ">
    153. <spanclass="label">
    154. element
    155. </span>
    156. <spanclass="widthdashed">
    157. </span>
    158. <spanclass="heightdashed">
    159. </span>
    160. <spanclass="measureBox">
    161. <spanclass="right">
    162. height
    163. </span>
    164. </span>
    165. <spanclass="bottom height50">
    166. width
    167. </span>
    168. </span>
    169. <spanclass="right bgyellow">
    170. right
    171. </span>
    172. </span>
    173. <spanclass="bottom height50 bgyellow">
    174. bottom
    175. </span>
    176. </span>
    177. <spanclass="right bggreen">
    178. right
    179. </span>
    180. </span>
    181. <spanclass="bottom height50 bggreen">
    182. bottom
    183. </span>
    184. </span>
    185. <spanclass="right bgred">
    186. right
    187. </span>
    188. </span>
    189. <spanclass="bottom height50 bgred">
    190. bottom
    191. </span>
    192. </span>
    193. </span>
    194. </body>
    195. </html>

    React Native实现盒子模型显示

    • 类似HTML写法
    1. /**
    2. * Sample React Native App
    3. * https://github.com/facebook/react-native
    4. */
    5. 'use strict';
    6. importReact,{
    7. AppRegistry,
    8. Component,
    9. StyleSheet,
    10. Text,
    11. View
    12. }from'react-native';
    14. classDongFangextendsComponent{
    15. render(){
    16. return(
    17. <View style={[BoxStyles.margginBox]}ref="lab1">
    18. <View style={[BoxStyles.box,BoxStyles.height400,BoxStyles.width400]}>
    19. <View style={[BoxStyles.top,BoxStyles.height50,BoxStyles.bgred]}>
    20. <Text style={BoxStyles.yellow}>top</Text></View>
    21. <View style={[BoxStyles.borderBox]}>
    22. <View style={[BoxStyles.left,BoxStyles.bgred]}>
    23. <Text style={BoxStyles.yellow}>left</Text></View>
    24. <View style={[BoxStyles.box,BoxStyles.height300]}>
    25. <View style={[BoxStyles.top,BoxStyles.height50,BoxStyles.bggreen]}>
    26. <Text style={BoxStyles.yellow}>top</Text></View>
    27. <View style={[BoxStyles.paddingBox]}>
    28. <View style={[BoxStyles.left,BoxStyles.bggreen]}>
    29. <Text style={BoxStyles.yellow}>left</Text></View>
    30. <View style={[BoxStyles.box,BoxStyles.height200]}>
    31. <View style={[BoxStyles.top,BoxStyles.height50,BoxStyles.bgyellow]}>
    32. <Text style={BoxStyles.yellow}>top</Text></View>
    33. <View style={[BoxStyles.elementBox]}>
    34. <View style={[BoxStyles.left,BoxStyles.bgyellow]}>
    35. <Text style={BoxStyles.yellow}>left</Text></View>
    36. <View style={[BoxStyles.box,BoxStyles.height100]}>
    37. <View style={[BoxStyles.label]}>
    38. <Text style={BoxStyles.white}>element</Text></View>
    39. <View style={[BoxStyles.widthdashed]}></View>
    40. <View style={[BoxStyles.heightdashed]}></View>
    41. <View style={[BoxStyles.measureBox]}>
    42. <View style={[BoxStyles.right]}>
    43. <Text style={[BoxStyles.yellow]}>height</Text></View>
    44. </View>
    45. <View style={[BoxStyles.bottom,BoxStyles.height50]}>
    46. <Text style={BoxStyles.yellow}>width</Text></View>
    47. </View>
    48. <View style={[BoxStyles.right,BoxStyles.bgyellow]}><Text style={BoxStyles.yellow}>right</Text></View>
    49. </View>
    50. <View style={[BoxStyles.bottom,BoxStyles.height50,BoxStyles.bgyellow]}>
    51. <Text style={BoxStyles.yellow}>bottom</Text></View>
    52. <View style={[BoxStyles.label]}>
    53. <Text style={BoxStyles.white}>padding</Text></View>
    54. </View>
    55. <View style={[BoxStyles.right,BoxStyles.bggreen]}><Text style={BoxStyles.yellow}>right</Text></View>
    56. </View>
    57. <View style={[BoxStyles.bottom,BoxStyles.height50,BoxStyles.bggreen]}>
    58. <Text style={BoxStyles.yellow}>bottom</Text></View>
    59. <View style={[BoxStyles.label]}><Text style={BoxStyles.white}>border</Text></View>
    60. </View>
    61. <View style={[BoxStyles.right,BoxStyles.bgred]}>
    62. <Text style={BoxStyles.yellow}>right</Text></View>
    63. </View>
    64. <View style={[BoxStyles.bottom,BoxStyles.height50,BoxStyles.bgred]}>
    65. <Text style={BoxStyles.yellow}>bottom</Text></View>
    66. <View style={[BoxStyles.label]}><Text style={BoxStyles.white}>margin</Text></View>
    67. </View>
    68. </View>
    69. );
    70. }
    71. }
    73. constBoxStyles=StyleSheet.create({
    74. height50:{
    75. height:50,
    76. },
    77. height400:{
    78. height:400,
    79. },
    80. height300:{
    81. height:300,
    82. },
    83. height200:{
    84. height:200,
    85. },
    86. height100:{
    87. height:100,
    88. },
    89. width400:{
    90. width:400,
    91. },
    92. width300:{
    93. width:300,
    94. },
    95. width200:{
    96. width:200,
    97. },
    98. width100:{
    99. width:100,
    100. },
    101. bgred:{
    102. backgroundColor:'#6AC5AC',
    103. },
    104. bggreen:{
    105. backgroundColor:'#414142',
    106. },
    107. bgyellow:{
    108. backgroundColor:'#D64078',
    109. },
    110. box:{
    111. flexDirection:'column',
    112. flex:1,
    113. position:'relative',
    114. },
    115. label:{
    116. top:0,
    117. left:0,
    118. paddingTop:0,
    119. paddingRight:3,
    120. paddingBottom:3,
    121. paddingLeft:0,
    122. position:'absolute',
    123. backgroundColor:'#FDC72F',
    124. },
    125. top:{
    126. justifyContent:'center',
    127. alignItems:'center',
    128. },
    129. bottom:{
    130. justifyContent:'center',
    131. alignItems:'center',
    132. },
    133. right:{
    134. width:50,
    135. justifyContent:'space-around',
    136. alignItems:'center',
    137. },
    138. left:{
    139. width:50,
    140. justifyContent:'space-around',
    141. alignItems:'center',
    142. },
    143. heightdashed:{
    144. bottom:0,
    145. top:0,
    146. right:20,
    147. borderLeftWidth:1,
    148. position:'absolute',
    149. borderLeftColor:'#FDC72F',
    150. },
    151. widthdashed:{
    152. bottom:25,
    153. left:0,
    154. right:0,
    155. borderTopWidth:1,
    156. position:'absolute',
    157. borderTopColor:'#FDC72F',
    158. },
    159. yellow:{
    160. color:'#FDC72F',
    161. fontWeight:'900',
    162. },
    163. white:{
    164. color:'white',
    165. fontWeight:'900',
    166. },
    167. margginBox:{
    168. position:'absolute',
    169. top:100,
    170. paddingLeft:7,
    171. paddingRight:7,
    172. },
    173. borderBox:{
    174. flex:1,
    175. justifyContent:'space-between',
    176. flexDirection:'row',
    177. },
    178. paddingBox:{
    179. flex:1,
    180. justifyContent:'space-between',
    181. flexDirection:'row',
    182. },
    183. elementBox:{
    184. flex:1,
    185. justifyContent:'space-between',
    186. flexDirection:'row',
    187. },
    188. measureBox:{
    189. flex:1,
    190. flexDirection:'row',
    191. justifyContent:'flex-end',
    192. alignItems:'flex-end',
    193. },
    194. container:{
    195. flex:1,
    196. justifyContent:'center',
    197. alignItems:'center',
    198. backgroundColor:'#F5FCFF',
    199. },
    200. welcome:{
    201. fontSize:20,
    202. textAlign:'center',
    203. margin:10,
    204. },
    205. instructions:{
    206. textAlign:'center',
    207. color:'#333333',
    208. marginBottom:5,
    209. },
    210. });
    212. AppRegistry.registerComponent('DongFang',()=>DongFang);
    • ReactJs写法
    1. /**
    2. * Sample React Native App
    3. * https://github.com/facebook/react-native
    4. */
    5. 'use strict';
    6. importReact,{
    7. AppRegistry,
    8. Component,
    9. StyleSheet,
    10. Text,
    11. View
    12. }from'react-native';
    14. classBoxextendsComponent{
    15. render(){
    16. return(
    17. <View style={[BoxStyles.box,BoxStyles[this.props.width],BoxStyles[this.props.height]]}>
    18. <View style={[BoxStyles.top,BoxStyles.height50,BoxStyles[this.props.classBg]]}><Text>top</Text></View>
    19. <View style={[BoxStyles[this.props.childName]]}>
    20. <View style={[BoxStyles.left,BoxStyles[this.props.classBg]]}><Text>left</Text></View>
    21. {this.props.children}
    22. <View style={[BoxStyles.right,BoxStyles[this.props.classBg]]}><Text>right</Text></View>
    23. </View>
    24. <View style={[BoxStyles.bottom,BoxStyles.height50,BoxStyles[this.props.classBg]]}><Text>bottom</Text></View>
    25. <View style={[BoxStyles.label]}><Text>{this.props.boxName}</Text></View>
    26. </View>
    27. )
    28. }
    29. }
    31. classMargginBoxextendsComponent{
    32. render(){
    33. return(
    34. <View style={[BoxStyles.margginBox]}>
    35. <Box childName="borderBox" height="height400" width="width400" boxName="margin" classBg="bgred">{this.props.children}</Box>
    36. </View>
    37. )
    38. }
    40. }
    43. classBorderBoxextendsComponent{
    44. render(){
    45. return(
    46. <Box childName="paddingBox" height="height300" width="width300" boxName="border" classBg="bggreen">{this.props.children}</Box>
    47. )
    48. }
    50. }
    52. classPaddingBoxextendsComponent{
    53. render(){
    54. return(
    55. <Box childName="elementBox" height="height200" width="width200" boxName="padding" classBg="bgyellow">{this.props.children}</Box>
    56. )
    57. }
    58. }
    60. classElementBoxextendsComponent{
    61. render(){
    62. return(
    63. <View style={[BoxStyles.box,BoxStyles.height100]}>
    64. <View style={[BoxStyles.measureBox]}>
    65. <View style={[BoxStyles.right]}><Text>height</Text></View>
    66. </View>
    67. <View style={[BoxStyles.bottom,BoxStyles.height50]}><Text>width</Text></View>
    68. <View style={[BoxStyles.label]}><Text>element</Text></View>
    69. <View style={[BoxStyles.widthdashed]}></View>
    70. <View style={[BoxStyles.heightdashed]}></View>
    71. </View>
    72. )
    73. }
    74. }
    76. classDongFangextendsComponent{
    77. render(){
    78. return(
    79. <MargginBox>
    80. <BorderBox>
    81. <PaddingBox>
    82. <ElementBox>
    83. </ElementBox>
    84. </PaddingBox>
    85. </BorderBox>
    86. </MargginBox>
    87. )
    88. }
    89. }
    91. constBoxStyles=StyleSheet.create({
    92. height50:{
    93. height:50,
    94. },
    95. height400:{
    96. height:400,
    97. },
    98. height300:{
    99. height:300,
    100. },
    101. height200:{
    102. height:200,
    103. },
    104. height100:{
    105. height:100,
    106. },
    107. width400:{
    108. width:400,
    109. },
    110. width300:{
    111. width:300,
    112. },
    113. width200:{
    114. width:200,
    115. },
    116. width100:{
    117. width:100,
    118. },
    119. bgred:{
    120. backgroundColor:'#6AC5AC',
    121. },
    122. bggreen:{
    123. backgroundColor:'#414142',
    124. },
    125. bgyellow:{
    126. backgroundColor:'#D64078',
    127. },
    128. box:{
    129. flexDirection:'column',
    130. flex:1,
    131. position:'relative',
    132. },
    133. label:{
    134. top:0,
    135. left:0,
    136. paddingTop:0,
    137. paddingRight:3,
    138. paddingBottom:3,
    139. paddingLeft:0,
    140. position:'absolute',
    141. backgroundColor:'#FDC72F',
    142. },
    143. top:{
    144. justifyContent:'center',
    145. alignItems:'center',
    146. },
    147. bottom:{
    148. justifyContent:'center',
    149. alignItems:'center',
    150. },
    151. right:{
    152. width:50,
    153. justifyContent:'space-around',
    154. alignItems:'center',
    155. },
    156. left:{
    157. width:50,
    158. justifyContent:'space-around',
    159. alignItems:'center',
    160. },
    161. heightdashed:{
    162. bottom:0,
    163. top:0,
    164. right:20,
    165. borderLeftWidth:1,
    166. position:'absolute',
    167. borderLeftColor:'#FDC72F',
    168. },
    169. widthdashed:{
    170. bottom:25,
    171. left:0,
    172. right:0,
    173. borderTopWidth:1,
    174. position:'absolute',
    175. borderTopColor:'#FDC72F',
    176. },
    177. yellow:{
    178. color:'#FDC72F',
    179. fontWeight:'900',
    180. },
    181. white:{
    182. color:'white',
    183. fontWeight:'900',
    184. },
    185. margginBox:{
    186. position:'absolute',
    187. top:100,
    188. paddingLeft:7,
    189. paddingRight:7,
    190. },
    191. borderBox:{
    192. flex:1,
    193. justifyContent:'space-between',
    194. flexDirection:'row',
    195. },
    196. paddingBox:{
    197. flex:1,
    198. justifyContent:'space-between',
    199. flexDirection:'row',
    200. },
    201. elementBox:{
    202. flex:1,
    203. justifyContent:'space-between',
    204. flexDirection:'row',
    205. },
    206. measureBox:{
    207. flex:1,
    208. flexDirection:'row',
    209. justifyContent:'flex-end',
    210. alignItems:'flex-end',
    211. },
    212. container:{
    213. flex:1,
    214. justifyContent:'center',
    215. alignItems:'center',
    216. backgroundColor:'#F5FCFF',
    217. },
    218. welcome:{
    219. fontSize:20,
    220. textAlign:'center',
    221. margin:10,
    222. },
    223. instructions:{
    224. textAlign:'center',
    225. color:'#333333',
    226. marginBottom:5,
    227. },
    228. });
    229. AppRegistry.registerComponent('DongFang',()=>DongFang);
  • 相关阅读:
    Qt之加载QSS文件
    Qt之QSS（黑色炫酷）
    Sublime Text 2 快捷键
    QTablewidget 简单例子
    QTableview 只显示横向线
    Qt删除文件夹
    Ubuntu(Debian)apt-get
    C++中char*与wchar_t*之间的转换
    Qtl和JS、HTML通信/交互
    浅谈Socket编程
  • 原文地址：https://www.cnblogs.com/wisemen/p/5837863.html
Copyright © 2020-2023  润新知