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

  • 相关阅读:
    oracle查询当天数据三种方式性能对比
    APPCAN IDE中安装emmet插件
    MAS 移动业务整合系统
    SDK 移动应用开发系统
    移动应用开发平台介绍
    安装Sublime Text 3插件的方法
    2014勿勿已过,2015已迎面而来
    入驻博客园
    zkw线段树
    贪心题
  • 原文地址:https://www.cnblogs.com/qqpw/p/6629487.html
Copyright © 2011-2022 走看看