React基础语法学习

React 前端之家
前端之家收集整理的这篇文章主要介绍了React基础语法学习，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

React主要有如下3个特点：

  • 作为UI（Just the UI）
  • 虚拟DOM（Virtual DOM）:这是亮点 是React最重要的一个特性 放进内存 最小更新的视图,差异部分更新 diff算法
  • 数据流（Date Flow）单向数据流

学习React需要掌握哪些知识？

  • JSX语法 类似XML
  • ES6相关知识
  • 前端基础 CSS+DIV JS

例子一
（简单组件和数据传递） 使用this.props 指向自己的属性

<!DOCTYPE html>@H_404_33@ <html@H_404_33@>@H_404_33@ <head@H_404_33@ lang@H_404_33@="en"@H_404_33@>@H_404_33@ <Meta@H_404_33@ charset@H_404_33@="UTF-8"@H_404_33@>@H_404_33@ <title@H_404_33@>@H_404_33@React第一个例子</title@H_404_33@>@H_404_33@ <script@H_404_33@ type@H_404_33@="text/javascript"@H_404_33@ src@H_404_33@="react.js"@H_404_33@>@H_404_33@@H_404_33@</script@H_404_33@>@H_404_33@ <script@H_404_33@ type@H_404_33@="text/javascript"@H_404_33@ src@H_404_33@="react-dom.js"@H_404_33@>@H_404_33@@H_404_33@</script@H_404_33@>@H_404_33@ <script@H_404_33@ type@H_404_33@="text/javascript"@H_404_33@ src@H_404_33@="browser.min.js"@H_404_33@>@H_404_33@@H_404_33@</script@H_404_33@>@H_404_33@ </head@H_404_33@>@H_404_33@ <body@H_404_33@>@H_404_33@ <div@H_404_33@ id@H_404_33@="example"@H_404_33@>@H_404_33@</div@H_404_33@>@H_404_33@ <script@H_404_33@ type@H_404_33@="text/babel"@H_404_33@>@H_404_33@ var@H_404_33@ HelloMessage=React.createClass( { render:function@H_404_33@()@H_404_33@{@H_404_33@ return@H_404_33@ <h1@H_404_33@ style@H_404_33@=@H_404_33@@H_404_33@@H_404_33@@H_404_33@{{color@H_404_33@:'#ff@H_404_33@0000',fontSize@H_404_33@:'24px@H_404_33@'}}@H_404_33@ >Hello {this@H_404_33@.props.name}!我是东方耀</h1>; /@H_404_33@/这是注释 React.createElement } } ); ReactDOM.render(<HelloMessage name="React 语法基础8" /@H_404_33@>,document.getElementById('example'@H_404_33@)); @H_404_33@</script@H_404_33@>@H_404_33@ </body@H_404_33@>@H_404_33@ </html@H_404_33@>@H_404_33@@H_404_33@

例子二（通过this.state更新视图） 

<!DOCTYPE html>@H_404_33@
<html@H_404_33@>@H_404_33@
<head@H_404_33@ lang@H_404_33@="en"@H_404_33@>@H_404_33@
    <Meta@H_404_33@ charset@H_404_33@="UTF-8"@H_404_33@>@H_404_33@
    <title@H_404_33@>@H_404_33@React第二个例子</title@H_404_33@>@H_404_33@
    <script@H_404_33@ type@H_404_33@="text/javascript"@H_404_33@ src@H_404_33@="react.js"@H_404_33@>@H_404_33@@H_404_33@</script@H_404_33@>@H_404_33@
    <script@H_404_33@ type@H_404_33@="text/javascript"@H_404_33@ src@H_404_33@="react-dom.js"@H_404_33@>@H_404_33@@H_404_33@</script@H_404_33@>@H_404_33@
    <script@H_404_33@ type@H_404_33@="text/javascript"@H_404_33@ src@H_404_33@="browser.min.js"@H_404_33@>@H_404_33@@H_404_33@</script@H_404_33@>@H_404_33@
</head@H_404_33@>@H_404_33@
<body@H_404_33@>@H_404_33@

<div@H_404_33@ id@H_404_33@="example"@H_404_33@>@H_404_33@</div@H_404_33@>@H_404_33@

<script@H_404_33@ type@H_404_33@="text/babel"@H_404_33@>@H_404_33@ var@H_404_33@ Timer=React.createClass( { /*初始状态*/@H_404_33@ getInitialState:function@H_404_33@()@H_404_33@{@H_404_33@ return@H_404_33@ {secondsElapsed:0@H_404_33@}; },tick:function@H_404_33@()@H_404_33@{@H_404_33@ this@H_404_33@.setState({secondsElapsed:this@H_404_33@.state.secondsElapsed+1@H_404_33@}); },/*组件完成装载*/@H_404_33@ componentDidMount:function@H_404_33@()@H_404_33@{@H_404_33@ this@H_404_33@.interval=setInterval(this@H_404_33@.tick,1000@H_404_33@); },/*组件将被卸载 清除定时器*/@H_404_33@ componentWillUnmount:function@H_404_33@()@H_404_33@{@H_404_33@ clearInterval(this@H_404_33@.interval); },/*渲染视图*/@H_404_33@ render:function@H_404_33@()@H_404_33@{@H_404_33@ return@H_404_33@( <div@H_404_33@>@H_404_33@ Seconds Elapsed:{this.state.secondsElapsed} </div@H_404_33@>@H_404_33@ ); } } ); React.render( <Timer@H_404_33@ />@H_404_33@,document.getElementById('example')); @H_404_33@@H_404_33@</script@H_404_33@>@H_404_33@

</body@H_404_33@>@H_404_33@
</html@H_404_33@>@H_404_33@

例子三（简单应用） 

<!DOCTYPE html>@H_404_33@ <html@H_404_33@>@H_404_33@ <head@H_404_33@ lang@H_404_33@="en"@H_404_33@>@H_404_33@ <Meta@H_404_33@ charset@H_404_33@="UTF-8"@H_404_33@>@H_404_33@ <title@H_404_33@>@H_404_33@React第三个例子</title@H_404_33@>@H_404_33@ <script@H_404_33@ type@H_404_33@="text/javascript"@H_404_33@ src@H_404_33@="react.js"@H_404_33@>@H_404_33@@H_404_33@</script@H_404_33@>@H_404_33@ <script@H_404_33@ type@H_404_33@="text/javascript"@H_404_33@ src@H_404_33@="react-dom.js"@H_404_33@>@H_404_33@@H_404_33@</script@H_404_33@>@H_404_33@ <script@H_404_33@ type@H_404_33@="text/javascript"@H_404_33@ src@H_404_33@="browser.min.js"@H_404_33@>@H_404_33@@H_404_33@</script@H_404_33@>@H_404_33@ </head@H_404_33@>@H_404_33@ <body@H_404_33@>@H_404_33@ <div@H_404_33@ id@H_404_33@="example"@H_404_33@>@H_404_33@</div@H_404_33@>@H_404_33@ <script@H_404_33@ type@H_404_33@="text/babel"@H_404_33@>@H_404_33@ var@H_404_33@ ShowEditor=React.createClass( { getInitialState:function@H_404_33@()@H_404_33@{@H_404_33@ return@H_404_33@ {value:'你可以在这里输入文字'@H_404_33@}; },handleChange:function@H_404_33@()@H_404_33@{@H_404_33@ this@H_404_33@.setState({value:React.findDOMNode(this@H_404_33@.refs.textarea).value}); },render:function@H_404_33@()@H_404_33@{@H_404_33@ return@H_404_33@ ( <div@H_404_33@>@H_404_33@ <h3@H_404_33@>@H_404_33@输入</h3@H_404_33@>@H_404_33@ <textarea@H_404_33@ style@H_404_33@=@H_404_33@@H_404_33@@H_404_33@@H_404_33@{{width@H_404_33@:300,height@H_404_33@:150,outline@H_404_33@:'none@H_404_33@'}}@H_404_33@ onChange={this@H_404_33@.handleChange} ref="textarea"@H_404_33@ defaultValue={this@H_404_33@.state.value} /> <h3@H_404_33@>@H_404_33@输出</h3@H_404_33@>@H_404_33@ <div@H_404_33@>@H_404_33@ {this.state.value} </div@H_404_33@>@H_404_33@ </div@H_404_33@>@H_404_33@ ); } } ); React.render(<ShowEditor@H_404_33@ />@H_404_33@,document.getElementById('example')); @H_404_33@@H_404_33@</script@H_404_33@>@H_404_33@ </body@H_404_33@>@H_404_33@ </html@H_404_33@>@H_404_33@@H_404_33@

flexBox布局

伸缩项目的属性

1.order
定义项目的排列顺序，数值越小，排列越靠前，默认值为0，语法为：order：整数值
2.flex-grow
定义伸缩项目的放大比例，默认值为0，即表示如果存在剩余空间，也不放大，语法为：flex-grow：整
数值
3.flex-shrink
定义伸缩项目的收缩能力，默认值为1 ，其语法为：flex-shrink:整数值
4.flex-basis
用来设置伸缩项目的基准值，剩余的空间按比率进行伸缩，其语法为：flex-basis:length | auto，默认
值为auto
5.flex
是flex-grow flex-shrink flex-basis这三个属性的缩写，其语法为：flex:none | flex-grow flex-shrink flexbasis，
其中第二个和第三个参数为可选参数，默认值为：0 1 auto
6.align-self
用来设置单独的伸缩项目在交叉轴上的对齐方式，会覆盖默认的对齐方式，其语法为：align-self:auto
| flex-start | flex-end | center | baseline | stretch(伸缩项目在交叉轴方向占满伸缩容器，如果交叉轴为
垂直方向的话，只有在不设置高度的情况下才能看到效果)

在React Native中使用flexBox

RN目前主要支持flexBox的如下6个属性：
1.alignItems
用来定义伸缩项目在交叉轴上的对齐方式，语法为： alignItems:flex-start（默认值） | flex-end |
center | stretch
2.alignSelf
用来设置单独的伸缩项目在交叉轴上的对齐方式，会覆盖默认的对齐方式，其语法为：alignSelf:auto |
flex-start | flex-end | center | stretch(伸缩项目在交叉轴方向占满伸缩容器，如果交叉轴为垂直方向的
话，只有在不设置高度的情况下才能看到效果)
3.flex
是flex-grow flex-shrink flex-basis这三个属性的缩写，其语法为：flex:none | flex-grow flex-shrink flexbasis，
其中第二个和第三个参数为可选参数，默认值为：0 1 auto
4.flexDirection
指定主轴的方向 flex-direction:row| row-reverse | column（默认值） | column-reverse
5.flexWrap
6.justifyContent

Box实现

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

效果如下

ReactNative版实现 

/**
 * 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@H_404_33@ style@H_404_33@={[BoxStyles.margginBox]}@H_404_33@ ref@H_404_33@="lab1"@H_404_33@>@H_404_33@
          <View@H_404_33@ style@H_404_33@={[BoxStyles.Box,BoxStyles.height400,BoxStyles.width400]}@H_404_33@>@H_404_33@
            <View@H_404_33@ style@H_404_33@={[BoxStyles.top,BoxStyles.height50,BoxStyles.bgred]}@H_404_33@>@H_404_33@
              <Text@H_404_33@ style@H_404_33@={BoxStyles.yellow}@H_404_33@>@H_404_33@top</Text@H_404_33@>@H_404_33@</View@H_404_33@>@H_404_33@
            <View@H_404_33@ style@H_404_33@={[BoxStyles.borderBox]}@H_404_33@>@H_404_33@
              <View@H_404_33@ style@H_404_33@={[BoxStyles.left,BoxStyles.bgred]}@H_404_33@ >@H_404_33@
                <Text@H_404_33@ style@H_404_33@={BoxStyles.yellow}@H_404_33@>@H_404_33@left</Text@H_404_33@>@H_404_33@</View@H_404_33@>@H_404_33@
              <View@H_404_33@ style@H_404_33@={[BoxStyles.Box,BoxStyles.height300]}@H_404_33@>@H_404_33@
                <View@H_404_33@ style@H_404_33@={[BoxStyles.top,BoxStyles.bggreen]}@H_404_33@>@H_404_33@
                  <Text@H_404_33@ style@H_404_33@={BoxStyles.yellow}@H_404_33@>@H_404_33@top</Text@H_404_33@>@H_404_33@</View@H_404_33@>@H_404_33@
                <View@H_404_33@ style@H_404_33@={[BoxStyles.paddingBox]}@H_404_33@>@H_404_33@
                  <View@H_404_33@ style@H_404_33@={[BoxStyles.left,BoxStyles.bggreen]}@H_404_33@ >@H_404_33@
                    <Text@H_404_33@ style@H_404_33@={BoxStyles.yellow}@H_404_33@>@H_404_33@left</Text@H_404_33@>@H_404_33@</View@H_404_33@>@H_404_33@
                  <View@H_404_33@ style@H_404_33@={[BoxStyles.Box,BoxStyles.height200]}@H_404_33@>@H_404_33@
                    <View@H_404_33@ style@H_404_33@={[BoxStyles.top,BoxStyles.bgyellow]}@H_404_33@>@H_404_33@
                      <Text@H_404_33@ style@H_404_33@={BoxStyles.yellow}@H_404_33@>@H_404_33@top</Text@H_404_33@>@H_404_33@</View@H_404_33@>@H_404_33@
                    <View@H_404_33@ style@H_404_33@={[BoxStyles.elementBox]}@H_404_33@>@H_404_33@
                      <View@H_404_33@ style@H_404_33@={[BoxStyles.left,BoxStyles.bgyellow]}@H_404_33@ >@H_404_33@
                        <Text@H_404_33@ style@H_404_33@={BoxStyles.yellow}@H_404_33@>@H_404_33@left</Text@H_404_33@>@H_404_33@</View@H_404_33@>@H_404_33@
                      <View@H_404_33@ style@H_404_33@={[BoxStyles.Box,BoxStyles.height100]}@H_404_33@>@H_404_33@
                        <View@H_404_33@ style@H_404_33@={[BoxStyles.label]}@H_404_33@>@H_404_33@
                          <Text@H_404_33@ style@H_404_33@={BoxStyles.white}@H_404_33@>@H_404_33@element</Text@H_404_33@>@H_404_33@</View@H_404_33@>@H_404_33@
                        <View@H_404_33@ style@H_404_33@={[BoxStyles.widthdashed]}@H_404_33@ >@H_404_33@</View@H_404_33@>@H_404_33@
                        <View@H_404_33@ style@H_404_33@={[BoxStyles.heightdashed]}@H_404_33@ >@H_404_33@</View@H_404_33@>@H_404_33@
                        <View@H_404_33@ style@H_404_33@={[BoxStyles.measureBox]}@H_404_33@ >@H_404_33@
                          <View@H_404_33@ style@H_404_33@={[BoxStyles.right]}@H_404_33@>@H_404_33@
                            <Text@H_404_33@ style@H_404_33@={[BoxStyles.yellow]}@H_404_33@>@H_404_33@height</Text@H_404_33@>@H_404_33@</View@H_404_33@>@H_404_33@
                        </View@H_404_33@>@H_404_33@
                        <View@H_404_33@ style@H_404_33@={[BoxStyles.bottom,BoxStyles.height50]}@H_404_33@>@H_404_33@
                          <Text@H_404_33@ style@H_404_33@={BoxStyles.yellow}@H_404_33@>@H_404_33@width</Text@H_404_33@>@H_404_33@</View@H_404_33@>@H_404_33@
                      </View@H_404_33@>@H_404_33@
                      <View@H_404_33@ style@H_404_33@={[BoxStyles.right,BoxStyles.bgyellow]}@H_404_33@>@H_404_33@<Text@H_404_33@ style@H_404_33@={BoxStyles.yellow}@H_404_33@>@H_404_33@right</Text@H_404_33@>@H_404_33@</View@H_404_33@>@H_404_33@
                    </View@H_404_33@>@H_404_33@
                    <View@H_404_33@ style@H_404_33@={[BoxStyles.bottom,BoxStyles.bgyellow]}@H_404_33@>@H_404_33@
                      <Text@H_404_33@ style@H_404_33@={BoxStyles.yellow}@H_404_33@>@H_404_33@bottom</Text@H_404_33@>@H_404_33@</View@H_404_33@>@H_404_33@
                    <View@H_404_33@ style@H_404_33@={[BoxStyles.label]}@H_404_33@>@H_404_33@
                      <Text@H_404_33@ style@H_404_33@={BoxStyles.white}@H_404_33@>@H_404_33@padding</Text@H_404_33@>@H_404_33@</View@H_404_33@>@H_404_33@
                  </View@H_404_33@>@H_404_33@
                  <View@H_404_33@ style@H_404_33@={[BoxStyles.right,BoxStyles.bggreen]}@H_404_33@>@H_404_33@<Text@H_404_33@ style@H_404_33@={BoxStyles.yellow}@H_404_33@>@H_404_33@right</Text@H_404_33@>@H_404_33@</View@H_404_33@>@H_404_33@
                </View@H_404_33@>@H_404_33@
                <View@H_404_33@ style@H_404_33@={[BoxStyles.bottom,BoxStyles.bggreen]}@H_404_33@>@H_404_33@
                  <Text@H_404_33@ style@H_404_33@={BoxStyles.yellow}@H_404_33@>@H_404_33@bottom</Text@H_404_33@>@H_404_33@</View@H_404_33@>@H_404_33@
                <View@H_404_33@ style@H_404_33@={[BoxStyles.label]}@H_404_33@>@H_404_33@<Text@H_404_33@ style@H_404_33@={BoxStyles.white}@H_404_33@>@H_404_33@border</Text@H_404_33@>@H_404_33@</View@H_404_33@>@H_404_33@
              </View@H_404_33@>@H_404_33@
              <View@H_404_33@ style@H_404_33@={[BoxStyles.right,BoxStyles.bgred]}@H_404_33@>@H_404_33@
                <Text@H_404_33@ style@H_404_33@={BoxStyles.yellow}@H_404_33@>@H_404_33@right</Text@H_404_33@>@H_404_33@</View@H_404_33@>@H_404_33@
            </View@H_404_33@>@H_404_33@
            <View@H_404_33@ style@H_404_33@={[BoxStyles.bottom,BoxStyles.bgred]}@H_404_33@>@H_404_33@
              <Text@H_404_33@ style@H_404_33@={BoxStyles.yellow}@H_404_33@>@H_404_33@bottom</Text@H_404_33@>@H_404_33@</View@H_404_33@>@H_404_33@
            <View@H_404_33@ style@H_404_33@={[BoxStyles.label]}@H_404_33@ >@H_404_33@<Text@H_404_33@ style@H_404_33@={BoxStyles.white}@H_404_33@>@H_404_33@margin</Text@H_404_33@>@H_404_33@</View@H_404_33@>@H_404_33@
          </View@H_404_33@>@H_404_33@
        </View@H_404_33@>@H_404_33@
    );
  }
}

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',right: {
    width: 50,justifyContent: 'space-around',left: {
    width: 50,heightdashed: {
    bottom: 0,top: 0,right: 20,borderLeftWidth: 1,borderLeftColor: '#FDC72F',widthdashed: {
    bottom: 25,right: 0,borderTopWidth: 1,borderTopColor: '#FDC72F',yellow: {
    color: '#FDC72F',fontWeight:'900',white: {
    color: 'white',margginBox:{
    position: 'absolute',top: 100,paddingLeft:7,paddingRight:7,borderBox:{
    flex: 1,justifyContent: 'space-between',flexDirection: 'row',paddingBox:{
    flex: 1,elementBox:{
    flex: 1,measureBox:{
    flex: 1,justifyContent: 'flex-end',alignItems:'flex-end',container: {
    flex: 1,justifyContent: 'center',backgroundColor: '#F5FCFF',welcome: {
    fontSize: 20,textAlign: 'center',margin: 10,instructions: {
    textAlign: 'center',color: '#333333',marginBottom: 5,});

AppRegistry.registerComponent('DongFang',() => DongFang);

猜你在找的React相关文章

react使用moment进行日期格式化
导入moment 使用方式 年月日，时分秒 星期几 相对时间 7天后 2小时后 明天 将毫秒转换成年...
推荐使用并手写实现redux-actions原理
@ 一、前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目，发现有之前...
【译】值得推荐的十大React Hook 库
十大React Hook库 原文地址：https://dev.to/bornfightcompany/top-10-react-hook-librari...
React生命周期
React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段，在React的整个生命...
React虚拟DOM的理解
React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树，每一个节点可以将其...
使用react-native-vector-icons（RN0.6+）
1.安装 npm install --save react-native-vector-icons or yarn add react-native-vector-...
React中的Props, State 与 render 函数
React 的核心特性总结 1、React：声明式开发 (JS或者jQuery属性命令式开发） 2、可以与其他...
React开发环境准备
react fiber 指react 16以上的版本 引入react的方式： 1、引入.js文件 2、使用脚手架工具（...
React组件拆分与传值
组件拆分与组件之间的传值 父子组件的概念： 父组件通过属性的方式，向自组件传值 子组件通...
React组件的简单演示
src/Test.js import React from &#39;react&#39;; function Test() { return ( &a...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作