TOP

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);






posted @ 2016-04-10 20:10  星空守候  阅读(345)  评论(0)  编辑  收藏  举报