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

  • 相关阅读:
    自定义文书思路
    传输
    Netty的组件和设计
    第一款Netty应用程序
    Netty异步和事件驱动
    初识MQTT
    TCP/IP协议分层模型
    uni原生插件的开发(安卓)
    uniapp离线打包记录
    日常问题处理:Linux通过设备名称如何查看硬盘SN
  • 原文地址:https://www.cnblogs.com/qqpw/p/6629487.html
Copyright © 2011-2022 走看看