当前位置: 首页 > 科技观察

ReactNative开发环境搭建

时间:2023-03-16 16:39:29 科技观察

最近开始全面使用React技术栈进行开发。听说团队计划在不久的将来使用ReactNative开发应用程序。迫不及待想尝试一波。首先搭建好开发环境并运行。我们的编程世界经典的程序,期间也有一些坑,在这里记录和大家分享。index安装包管理工具我使用的是Mac环境,所以以Mac为例,Windows其实区别不大。安装HomebrewHomebrew是为MacOS量身定制的集成包管理工具。我们用它来轻松安装Node.js和切换Node.js版本。/usr/bin/ruby-e"$(curl-fsSLhttps://raw.githubusercontent.com/Homebrew/install/master/install)"注意:在MaxOSX10.x版本使用Homebrew安装软件时,它可能会出现/usr/local目录无法写入的权限问题。这时候可以使用如下命令修复:sudochown-R`whoami`/usr/local安装Node.js接下来使用Homebrew安装Node.js,windows环境可以直接从官方下载网站安装Node.js:brewinstallnode如果安装下载速度太慢,可以设置国内淘宝提供的镜像:npmconfigsetregistryhttps://registry.npm.taobao.org--globalnpmconfigsetdisturlhttps://npm.taobao.org/dist--globalinstallation对于包管理,我们可以自由选择直接使用NPM或者安装Yarn包管理工具。NPM的使用相信大家都不陌生。这里以Yarn为例:Yarn是Facebook提供的替代npm的工具,可以加速node模块。下载。仍然需要使用NPM安装Yarn包:npminstall-gyarn然后我们可以使用yarnadd而不是npminstall--save。安装react-native-cli脚手架ReactNative官方提供一键式脚手架生成项目初始结构。初学者或者有经验的可以直接安装使用:npminstall-greact-native-cli安装设置编辑器Mac我们使用Xcode开发iOSAPP,Android开发可以使用Eclipse等,另外需要对Xcode编辑器进行简单配置即可支持reactnative:依次点击打开Xcode编辑器的Menu-》Preferences-》Locations,配置红框中的命令行工具项如下图:初始化项目并解决运行异常接下来可以使用脚手架进行初始化示例程序://初始化一个hello项目react-nativeinithellocdhello进入项目根目录后,使用run-ios命令启动iOSAPP:react-nativerun-iosforversionshigherthan0.45创建一个项目,也许你会看到出现如下错误:Error:Buildfailed:Unpacking/Users/zjy/.rncache/boost_1_63_0.tar.gz...Print:Entry,":CFBundleIdentifier",DoesNotExist降级版本方案找了很多方,发现有创建项目时缺少资源来下载和安装节点依赖模块。目前最新的0.45及以上版本需要下载boost库。库太大,导致下载出现问题。参考:https://github.com/facebook/react-native/issues/14368https://github.com/facebook/react-native/issues/14447有两种解决方案。如果不追求新版本的新特性,可以降低创建项目的版本,使用--version命令明确设置项目版本:react-nativeinitMyApp--version0.44.3替换资源文件方案,仍然想使用新版本。解决办法是手动下载相关文件替换:下载下面四个相关文件,放到项目根目录下的.rncache目录下,替换:下载地址:https://pan.baidu.com/s/1kV5iVzD.下载后替换:cd~/.rncachecp~/Downloads/boost_1_63_0.tar.gz~/.rnache/使用cp命令依次复制替换四个文件;然后删除第三方库文件,在node_modules/react-native/third-party/目录下:rm-rproject/node_modules/react-native/third-part再次执行启动程序:react-nativerun-ios发现可以可以正常运行,然后我们就可以在编辑器中编辑我们的工程了,比如我们的react-native入口js文件-index.ios.js文件,刷新一下就可以看到其他工具的变化NuclideNuclide是一个基于原子编辑器的集成开发Facebook提供的环境,可用于编写、运行和调试ReactNative应用程序。