美文网首页
使用React Native如何搭建iOS开发环境

使用React Native如何搭建iOS开发环境

作者: 含笑州 | 来源:发表于2021-03-17 15:10 被阅读0次

    安装依赖

    必须安装的依赖有:Node、Watchman、Xcode 和 CocoaPods。
    虽然你可以使用任何编辑器来开发应用(编写 js 代码),但你仍然必须安装 Xcode 来获得编译 iOS 应用所需的工具和环境。

    Node & Watchman

    我们推荐使用Homebrew来安装 Node 和 Watchman。在命令行中执行下列命令安装(如安装较慢可以尝试阿里云的镜像源

    brew install node
    brew install watchman
    

    成功截图如下:

    图1 图2

    如果你已经安装了 Node,请检查其版本是否在 v12 以上。安装完 Node 后建议设置 npm 镜像(淘宝源)以加速后面的过程(或使用科学上网工具)。

    注意:不要使用 cnpm!cnpm 安装的模块路径比较奇怪,packager 不能正常识别!

    # 使用nrm工具切换淘宝源
    npx nrm use taobao
    
    # 如果之后需要切换回官方源可使用
    npx nrm use npm
    

    成功截图如下:

    图3

    Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager 可以快速捕捉文件的变化从而实现实时刷新)。

    Yarn

    Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。

    npm install -g yarn
    

    成功截图如下:

    图4

    安装完 yarn 之后就可以用 yarn 代替 npm 了,例如用yarn代替npm install命令,用yarn add 某第三方库名代替npm install 某第三方库名。

    Xcode

    我这边之前安装过了,具体参考React Native

    CocoaPods

    具体参考React Native

    创建项目

    如果你之前全局安装过旧的react-native-cli命令行工具,请使用npm uninstall -g react-native-cli卸载掉它以避免一些冲突。
    使用 React Native 内建的命令行工具来创建一个名为"AwesomeProject"的新项目。这个命令行工具不需要安装,可以直接用 node 自带的npx命令来使用(注意 init 命令默认会创建最新的版本)

    npx react-native init AwesomeProject
    

    注意一:请不要在目录、文件名中使用中文、空格等特殊符号。请不要单独使用常见的关键字作为项目名(如 class, native, new, package 等等)。请不要使用与核心模块同名的项目名(如 react, react-native 等)。

    注意二:0.60 及以上版本的原生依赖是通过 CocoaPods 集成安装的。CocoaPods 的仓库在国内也很难访问。如果在 CocoaPods 的依赖安装步骤卡很久(命令行停在 Installing CocoaPods dependencies),请务必使用稳定的代理软件并确定其配置对命令行有效。

    如果你是想把 React Native 集成到现有的原生项目中,则步骤完全不同,请参考集成到现有原生应用

    我在执行这一步操作的时候出现了错误如下:


    图5

    发现是公司的网做了限制,导致安装github上面的三方库没有安装成功,之后我切换成自己的热点,进入刚创建项目/ios,执行

    pod install --repo-update
    

    成功截图如下:

    图6 图7

    编译并运行 React Native 应用

    在你的项目目录中运行yarn ios或者yarn react-native run-ios

    cd AwesomeProject
    yarn iOS
    # 或者
    yarn react-native run-ios
    

    成功的话,你会发现会自动开启你的电脑终端,然后你的模拟器也会运行起来,如下:


    图8 图9 图10

    其他错误

    如果出现下载失败的话,可能是你的网有问题,可以采用科学上网,可以避免很多错误

    相关文章

      网友评论

          本文标题:使用React Native如何搭建iOS开发环境

          本文链接:https://www.haomeiwen.com/subject/affecltx.html