• 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

  • 相关阅读:
    Java实现 LeetCode 50 Pow(x,n)
    Java实现 LeetCode 50 Pow(x,n)
    Java实现 LeetCode 49 字母异位词分组
    Java实现 LeetCode 49 字母异位词分组
    Java实现 LeetCode 49 字母异位词分组
    Java实现 LeetCode 48 旋转图像
    Java实现 LeetCode 48 旋转图像
    Java实现 LeetCode 48 旋转图像
    Java实现 LeetCode 47 全排列 II(二)
    Java实现 LeetCode 47 全排列 II(二)
  • 原文地址:https://www.cnblogs.com/qqpw/p/6629487.html
Copyright © 2020-2023  润新知