zoukankan      html  css  js  c++  java
  • react Native如何实现跨平台

    react Native如何实现跨平台

         react Native是通过虚拟DOM实现跨平台,运行时

         将虚拟DOM转换为相应的web编码、android编号、ios编码进行运行的。

      

       代码实现:

         01.html:

         <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <script src="react.js"></script>
            <script src="react-dom.js"></script>
            <script src="babel.min.js"></script>
            <script type="text/babel" src="02.js"></script>
            <style type="text/css">
                .text{
                    color : red;
                }
            </style>
            <title>React</title>
        </head>
        <body>
            <div id="myDiv"></div>
        </body>
        </html>

         01.js:

         //React.js
        //React 组件化(组件的重用)
        //自定义组件
        class ChildText extends React.Component{
            //组件的内容
            render(){
               return <div>
                   Hello <b>React!</b>
            </div>;
            }
        }

        class WrapperText extends React.Component{
            render(){
                //虚拟DOM(Document Object Model)
                //html标签,小写开头
                //自定义组件:大写开头
                return <p>
                    <ChildText></ChildText>
                    <span>kerry</span>
                </p>;
            }
        }

        //绘制到页面中
        ReactDOM.render(<WrapperText></WrapperText>, document.body);

       运行 01.html:

            网页显示:   Hello React!

             kerry

  • 相关阅读:
    bzoj1589[Usaco2008 Dec]Trick or Treat on the Farm 采集糖果*
    bzoj1672[Usaco2005 Dec]Cleaning Shifts 清理牛棚*
    bzoj1691[Usaco2007 Dec]挑剔的美食家*
    bzoj1637[Usaco2007 Mar]Balanced Lineup*
    LinkedList源码
    链表
    反向打印链表
    空格替换
    二维数组查找
    待编辑
  • 原文地址:https://www.cnblogs.com/qqpw/p/6629487.html
Copyright © 2011-2022 走看看