react Native如何实现跨平台
Posted kerryqpw
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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
以上是关于react Native如何实现跨平台的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 expo 实现带有 react-native 的条带？ [关闭]
如何使用 React Navigation 6.x Native Stack Navigator (RN>0.6) 实现 React-native-gesture-handler？
如何在 React Native 中使用 SFAuthenticationSession 或 SFSafariViewController 实现 Facebook 登录？