美文网首页
React Native系列【mac下环境搭建】

React Native系列【mac下环境搭建】

作者: 老鱼_chaimyu | 来源:发表于2019-04-14 18:55 被阅读0次

    本文仅用来记录个人安装过程备忘

    环境

    安装node

    本机已经安装nvm,直接使用nvm安装

    Chaim:~ Chaim$ nvm install 8
    Downloading https://nodejs.org/dist/v8.15.1/node-v8.15.1-darwin-x64.tar.xz...
    ######################################################################## 100.0%
    WARNING: checksums are currently disabled for node.js v4.0 and later
    Now using node v8.15.1 (npm v6.4.1)
    
    Chaim:~ Chaim$ nvm use v8
    Now using node v8.15.1 (npm v6.4.1)
    

    安装Watchman

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

    Chaim:~ Chaim$ brew install watchman
    

    安装yarn和react-native-cli

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

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

    Chaim:scibene-app Chaim$ npm install -g yarn react-native-cli
    
    yarn config set registry https://registry.npm.taobao.org --global
    yarn config set disturl https://npm.taobao.org/dist --global
    

    安装Xcode

    本机已安装Xcode10.1


    创建新项目

    既然参考中说0.45版本要下载boost等库(虽然机器上各种库都有,正因为各种库都有,版本也比较乱),那就先用0.44.3创建吧。

    Chaim:scibene-app Chaim$ react-native init scibeneapp --version 0.44.3
    This will walk you through creating a new React Native project in /Users/Chaim/Documents/workspace/scibene-app/scibeneapp
    Using yarn v1.15.2
    Installing react-native@0.44.3...
    yarn add v1.15.2
    ...
    To run your app on iOS:
       cd /Users/Chaim/Documents/workspace/scibene-app/scibeneapp
       react-native run-ios
       - or -
       Open ios/scibeneapp.xcodeproj in Xcode
       Hit the Run button
    To run your app on Android:
       cd /Users/Chaim/Documents/workspace/scibene-app/scibeneapp
       Have an Android emulator running (quickest way to get started), or a device connected
       react-native run-android
    

    创建项目成功后,可以在提示中找到怎么在iOS和Android中运行。

    编译运行

    运行ios版本

    Chaim:scibene-app Chaim$ cd scibeneapp/
    Chaim:scibeneapp Chaim$ react-native run-ios
    

    iPhone模拟器启动了,想像中的app界面没有出现(R老板说他弄半天没启动起来,本想打他脸的,没给我面子啊),命令提示错误,如下:

    ~/Documents/workspace/scibene-app/scibeneapp/node_modules/react-native/packager ~
    ./packager.sh: line 11: node: command not found
    ~
    Process terminated. Press <enter> to close the window
    

    模拟器也提示一个红色背景的“No bundle URL present.”错误信息。

    No Bundle URL present解决

    看提示的错误,似乎是要启动个包服务,好像以前很多应用也是这样。还好,简单搜索就有前人把经验分享了,感谢!

    就是要用多一个命令行,启动一个后台服务:

    Chaim:scibeneapp Chaim$ react-native start
    

    然后再另一个命令行中运行"react-native run-ios"即可。

    image.png

    修改项目

    在界面上提示可以直接修改index.ios.js,然后按“Cmd+R”就能重新加载,试一下在Text相关块下增加一个Text块,显示更多文字。

            <Text style={styles.welcome}>
              I like React Native!
            </Text>
    

    按“Cmd+R”,可以看到模拟器中界面已成功更新!

    开发菜单

    在模拟器中按“Cmd+D”弹出开发菜单,可以打开“Live Reload”这样代码保存后就会自动更新了。

    其它菜单以后碰到再说。

    参考

    https://reactnative.cn/docs/getting-started.html

    https://blog.csdn.net/c_kite/article/details/79215023

    相关文章

      网友评论

          本文标题:React Native系列【mac下环境搭建】

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