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