想了解一下ReactNative的实现,就付费购买的ReactNative中文网的课程—听晴明老师从头讲ReactNative.也准备在CSDN上记录一下自己的学习笔记,分享给更多的朋友.
ReactNative架构和原理的简单介绍
- 原生开发(Native App)
- 混合开发(Hybrid App)
混合开发的优势在哪里?
- HTML/CSS/JS 开发成本低:比起原生语言,这3个学习难度要求低.资源丰富.
- 天然跨平台:任何平台都离不开浏览器,也就少不了WebView组件.
- 无审核热更新:JS作为动态解释运行语言,可以直接通过服务器下发后执行,从而实现绕过审核的热更新.
- 可扩展:虽然js本身不具备硬件能力.但可以通过原生桥接的方式扩展,且这些扩展大多免费开源.
混合开发的劣势在哪里? 性能消耗太大,性能消耗太大,性能消耗太大,重要的事情说3遍.
- ReactNative
ReactNative的运行结构如下:
mac OS环境搭建
文档地址:https://reactnative.cn/docs/0.51/getting-started.html#content
1. 修改目录不可写权限问题的命令
sudo chown -R whoami /usr/local (chown就是change Owner的简写 -R是递归调用 whoami当前的用户 /usr/local当前目录 综合起来理解就是当前用户不是当前目录的所有者,所以回报权限问题的错误,调用这行命令就是递归调用当前目录以及其子目录并改变其owner为当前用户)
2. 怎么查看当前mac是否安装了HomeBrew(Mac系统的包管理器，能在Mac中方便的安装软件或者卸载软件)
通过homeBrew的一些常用命令来判断是否成功安装了homeBrew.
//查看brew的帮助
brew –help
//安装软件
brew install git
//卸载软件
brew uninstall git
//搜索软件
brew search git
//显示已经安装软件列表
brew list更多命令在另行百度.
3. 安装node.js
brew install node//node安装成功后会自动安装npm查看当前mac是否安装了node,如果安装了,版本如何?
node -v查看当前mac是否成功安装了npm,如果安装了,版本如何?
npm -v //NPM(服务器在国外)是随同NodeJS一起安装的包管理工具，主要安装js方面的第三方包注意这里不要使用cnpm.
4. 安装命令行工具 Yarn, react-native-cli
npm install -g yarn react-native-cli//Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务 -g是安装到全局的意思5.安装XCode/Watchman/Flow
brew install watchman//Watchman是由Facebook提供的监视文件系统变更的工具。
brew install flow//Flow是一个静态的JS类型检查工具。6.测试安装
react-native init myAPP//创建一个工程名为MyApp的reactNative项目
cd myAPP
react-native run-ios //第一次运行时执行
react-native start//第二次运行之后执行React packager运行在node.js之上,类似一个小服务器.
项目创建成功后如下:
react-native No bundle URL present解决办法
先把ios/build文件夹先删除,重新编译运行react-native run-ios