最新公告
  • 欢迎您光临三优资源网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • React Native 环境搭建和创建项目(Mac)

    (一) 搭建基本环境(必要)

    使用React Native开发iOS应用需要OSX系统,Xcode,Homebrew,node,npm,也可以有选择的使用watchman 、Flow。

    1. 安装Homebrew

    Homebrew, 简称brew, Mac系统的包管理器, 用于安装NodeJS和一些其他必需的工具软件。
    Home-brew 的使用方式:
    1)搜索软件:brew search 软件名,如brew search wget
    2)安装软件:brew install 软件名,如brew install wget
    3)卸载软件:brew remove 软件名,如brew remove wget

    打开终端,运行以下语句(中间需要输入密码)进行安装:

    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

    运行效果如下:

    Homebrew安装.png

    可通过如下语句查看安装是否成功以及安装的Homebrew版本:

    brew -v

    正常情况下均可安装成功,若出现网络问题安装失败,则运行如下语句清理后再重新安装:

    ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)"
    ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

    2. 使用Homebrew来安装Node.js

    React Native需要NodeJS 4.0或更高版本。本文发布时Homebrew默认安装的是6.x版本,完全满足要求。

    终端运行语句如下:

    brew install node

    运行效果如下:

    安装Node.js.png

    3. 安装React Native的命令行工具(react-native-cli)

    React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

    终端运行语句如下:

    npm install -g react-native-cli

    运行效果如下:

    安装react-native-cli.png

    若出现错误(可能由于权限不足),则实用以下语句进行安装:

    sudo npm install -g react-native-cli

    补充:(由于国内网络问题,可以将npm仓库替换为国内镜像)

    //将npm仓库替换为国内镜像:
    npm config set registry https://registry.npm.taobao.org --global
    npm config set disturl https://npm.taobao.org/dist --global

    4. Xcode

    iOS 开发这个最基础的,应该一般有安装,,没有的话只推荐在App Store直接搜索安装。

    (二) 推荐安装的工具

    1. Watchman

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

    终端运行语句安装:

    brew install watchman

    运行效果如下:

    安装 Watchman.png

    2. Flow

    Flow是一个静态的JS类型检查工具,可方便找出代码中可能存在的类型错误。
    译注:你在很多示例中看到的奇奇怪怪的冒号问号,以及方法参数中像类型一样的写法,都是属于这个flow工具的语法。这一语法并不属于ES标准,只是Facebook自家的代码规范。

    终端运行语句安装:

    brew install flow

    运行效果如下:

    安装Flow.png

    3. React Native开发之IDE

    可以直接用自己喜欢的编辑器进行编辑。
    React Native官方推荐了三种IDE编写React Native应用:
    1)Atom和Nuclide
    2)WebStorm
    3)Sublime Text
    4) VSCode+React Native Tools

    更近一步的了解和使用参考我一起写的另一篇文章哈哈:
    React Native 开发之IDE

    (三) 创建第一个项目

    1. 初始化创建项目

    命令行创建项目:

    react-native init AwesomeProject

    运行截图如下:

    react-native init AwesomeProject.png

    这里可能会是个漫长的等待过程,可能由于项目依赖包本身就很庞大,让后下载速度比较慢。总之我半夜做的尝试,为了写文章截图哈哈,安心去看了一集异世界的动漫,然后回来就发现创建项目成功了哈。。(ps:之前在另一部电脑就试过创建项目活着集成原生的时候执行这个命令,不过等得不耐烦就又ca掉它了,,可能真的需要耐心哈哈)
    创建成功则如下:

    创建成功截图.png

    生成项目文件集.png

    2. 运行项目

    命令行运行项目

    //  视情况而定,总之进入项目根目录
    cd AwesomeProject
    
    //  运行iOS项目
    react-native run-ios

    接下来就是一连串反应,截图如下,成功运行项目:

    弹出运行服务窗口.png

    虚拟机运行成功截图.png

    补充:
    若是调试安卓版本:(需要安装好安卓SDK、配置环境等)

    //  运行安卓项目
    react-native run-android

    3. 除了命令行运行,也可直接像iOS原生那样运行

    方法一:Nuclide中打开AwesomeProject文件夹,然后运行
    方法二:双击ios/AwesomeProject.xcodeproj文件然后在Xcode中点击Run按钮。(最常用,对iOS开发者)

    4. 简单的修改调试

    使用你喜欢的编辑器打开index.ios.js并随便改上几行。
    在iOS Emulator中按下⌘-R就可以刷新APP并看到你的最新修改!

    作者:朱_源浩
    链接:http://www.jianshu.com/p/a85cba2efb7a
    來源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3165260857@qq.com
    2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
    3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
    4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!


    三优资源网 » React Native 环境搭建和创建项目(Mac)

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    三优资源网
    一个高级程序员模板开发平台

    发表评论

    • 231会员总数(位)
    • 1264资源总数(个)
    • 1本周发布(个)
    • 0 今日发布(个)
    • 1457稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情