react Native如何实现跨平台

最新推荐文章于 2024-07-22 00:58:31 发布

慕容屠苏

最新推荐文章于 2024-07-22 00:58:31 发布

阅读量1.2k

点赞数

分类专栏： reactNative 文章标签： reactNative 跨平台

本文链接：https://blog.csdn.net/kerryqpw/article/details/67090889

版权

reactNative 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

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);