• react native 搭建开发环境——Mac


    安装必须软件

    Homebrew

    Homebrew, Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件。

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

    注:在Max OS X 10.11(El Capitan)版本中,homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复:

    sudo chown -R `whoami` /usr/local

    Node

    使用Homebrew来安装Node.js.

    安装完node后建议设置npm镜像以加速后面的过程(或使用科学上网工具)。注意:不要使用cnpm!cnpm安装的模块路径比较奇怪,packager不能正常识别!

    npm config set registry https://registry.npm.taobao.org --global
    npm config set disturl https://npm.taobao.org/dist --global

    Yarn、React Native的命令行工具(react-native-cli)

    Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

    npm install -g yarn react-native-cli

    安装完yarn后同理也要设置镜像源:

    yarn config set registry https://registry.npm.taobao.org --global
    yarn config set disturl https://npm.taobao.org/dist --global

    Yarn、React Native的命令行工具(react-native-cli)

    Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

    npm install -g yarn react-native-cli

    安装完yarn后同理也要设置镜像源:

    yarn config set registry https://registry.npm.taobao.org --global
    yarn config set disturl https://npm.taobao.org/dist --global

    如果你看到EACCES: permission denied这样的权限报错,那么请参照上文的homebrew译注,修复/usr/local目录的所有权:

    sudo chown -R `whoami` /usr/local

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

    Android Studio

    React Native目前需要Android Studio2.0或更高版本。

    Android Studio需要Java Development Kit [JDK] 1.8(暂不支持更高版本)。你可以在命令行中输入 javac -version来查看你当前安装的JDK版本。如果版本不合要求,则可以到 官网上下载。

    Android Studio包含了运行和测试React Native应用所需的Android SDK和模拟器(但自我感觉模拟器有点卡)。

    除非特别注明,请不要改动安装过程中的选项。比如Android Studio默认安装了 Android Support Repository,而这也是React Native必须的(否则在react-native run-android时会报appcompat-v7包找不到的错误)。

    安装过程中有一些需要改动的选项:

      勾选PerformanceAndroid Virtual Device

    additional installs

    • 安装完成后,在Android Studio的启动欢迎界面中选择Configure | SDK Manager

    configure sdk

    • SDK Platforms窗口中,选择Show Package Details,然后在Android 6.0 (Marshmallow)中勾选Google APIsAndroid SDK Platform 23Intel x86 Atom System ImageIntel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image

    platforms

    • SDK Tools窗口中,选择Show Package Details,然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1(必须是这个版本)。然后还要勾选最底部的Android Support Repository.

    build tools

    ANDROID_HOME环境变量

    确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。具体的做法是把下面的命令加入到~/.bash_profile文件中:(译注:~表示用户目录,即/Users/你的用户名/,而小数点开头的文件在Finder中是隐藏的,并且这个文件有可能并不存在。请在终端下使用vi ~/.bash_profile命令创建或编辑。如不熟悉vi操作,请点击这里学习)。如果你的命令行不是bash,而是例如zsh等其他,请使用对应的配置文件。

    # 如果你不是通过Android Studio安装的sdk,则其路径可能不同,请自行确定清楚。
    export ANDROID_HOME=~/Library/Android/sdk

    然后使用下列命令使其立即生效(否则重启后才生效):

    source ~/.bash_profile

    可以使用echo $ANDROID_HOME检查此变量是否已正确设置。

    推荐安装的工具

    Watchman

    Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager可以快速捕捉文件的变化从而实现实时刷新)。译注:此工具官方虽然是推荐安装,但在实践中,我们认为此工具是必须安装,否则可能无法正常开发。

    brew install watchman

    Flow

    Flow是一个静态的JS类型检查工具。译注:你在很多示例中看到的奇奇怪怪的冒号问号,以及方法参数中像类型一样的写法,都是属于这个flow工具的语法。这一语法并不属于ES标准,只是Facebook自家的代码规范。所以新手可以直接跳过(即不需要安装这一工具,也不建议去费力学习flow相关语法)。

    brew install flow

    将Android SDK的Tools目录添加到PATH变量中

    你可以把Android SDK的tools和platform-tools目录添加到PATH变量中,以便在终端中运行一些Android工具,例如android avd或是adb logcat等。具体做法仍然是在~/.bash_profile中添加:

    export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

    其他可选的安装项

    Git

    Git版本控制。如果你已经安装过Xcode,则Git也已经一并安装了。如若没有,则使用下列命令安装:

    brew install git

    Nuclide

    Nuclide(此链接需要科学上网)是由Facebook提供的基于atom的集成开发环境,可用于编写、运行和 调试React Native应用。

    点击这里阅读Nuclide的入门文档

    译注:我们更推荐使用WebStormSublime TextVisual Studio Code来编写React Native应用。所有这些开发工具都是跨平台的。其中webstorm是收费的,体量较大,功能较多,基本无需配置。其他工具免费,相对轻量,但或多或少需要下载插件和配置。

    Genymotion

    具体安装方法请至这里

    比起Android Studio自带的原装模拟器,Genymotion是一个性能更好的选择,但它只对个人用户免费。

    1. 下载和安装Genymotion(genymotion需要依赖VirtualBox虚拟机,下载选项中提供了包含VirtualBox和不包含的选项,请按需选择)。
    2. 打开Genymotion。如果你还没有安装VirtualBox,则此时会提示你安装。
    3. 创建一个新模拟器并启动。
    4. 启动React Native应用后,可以按下⌘+M来打开开发者菜单。

    Gradle Daemon

    开启Gradle Daemon可以极大地提升java代码的增量编译速度。

    touch ~/.gradle/gradle.properties && echo "org.gradle.daemon=true" >> ~/.gradle/gradle.properties

    测试安装

    react-native init AwesomeProject
    cd AwesomeProject
    react-native run-android

    如果你在设备上看到了红屏报错,请参阅在设备上运行

    提示:你可以使用--version参数创建指定版本的项目。例如react-native init MyApp --version 0.39.2。注意版本号必须精确到两个小数点。

    参考文档:https://reactnative.cn/docs/0.51/getting-started.html

  • 相关阅读:
    java Vamei快速教程02 方法和数据成员
    java Vamei快速教程01
    二叉树
    高效通信模型之
    高效通信模型之
    线程间通信与同步
    线程
    进程
    C++面试知识点总结
    windows下UDP服务器和客户端的实现
  • 原文地址:https://www.cnblogs.com/lliuhh/p/8681950.html
Copyright © 2020-2023  润新知