前端analysis | 3w & 1h

《RN》- RN 入门整理

2020-03-02

环境搭建

node

1
2
3
4
5
6
7
8
9
//其版本是否在 v10 以上
brew install node

# 使用nrm工具切换淘宝源
npx nrm use taobao

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

yarn

1
2
//Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载
npm install -g yarn

watchman

1
2
//Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能
brew install watchman
  • 安装过程出现的异常
  • 解决方法
    1
    2
    3
    sudo chown -R $(whoami) /usr/local/share/man/man5 /usr/local/share/man/man7

    chmod u+w /usr/local/share/man/man5 /usr/local/share/man/man7
  • 安装路径提示
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    ==> readline
    readline is keg-only, which means it was not symlinked into /usr/local,
    because macOS provides the BSD libedit library, which shadows libreadline.
    In order to prevent conflicts when programs look for libreadline we are
    defaulting this GNU Readline installation to keg-only.

    For compilers to find readline you may need to set:
    export LDFLAGS="-L/usr/local/opt/readline/lib"
    export CPPFLAGS="-I/usr/local/opt/readline/include"

    ==> sqlite
    sqlite is keg-only, which means it was not symlinked into /usr/local,
    because macOS provides an older sqlite3.

    If you need to have sqlite first in your PATH run:
    echo 'export PATH="/usr/local/opt/sqlite/bin:$PATH"' >> ~/.bash_profile

    For compilers to find sqlite you may need to set:
    export LDFLAGS="-L/usr/local/opt/sqlite/lib"
    export CPPFLAGS="-I/usr/local/opt/sqlite/include"

    ==> python
    Python has been installed as
    /usr/local/bin/python3

    Unversioned symlinks `python`, `python-config`, `pip` etc. pointing to
    `python3`, `python3-config`, `pip3` etc., respectively, have been installed into
    /usr/local/opt/python/libexec/bin

    You can install Python packages with
    pip3 install <package>
    They will install into the site-package directory
    /usr/local/lib/python3.7/site-packages

Xcode

1
2
// version 10+
brew cask install xcode //同时安装 Xcode IDE、Xcode 的命令行工具和 iOS 模拟器。
* 如果你之前全局安装过旧的react-native-cli命令行工具,请卸载掉它以避免一些冲突。npx命令来使用即可。
1
npm uninstall -g react-native-cli

注意事项

* 一:0.45 及以上版本需要依赖 boost 等几个很难下载成功的第三方库编译。这里有中文网提供的国内下载链接(http://bbs.reactnative.cn/topic/4301/)。

* 二:0.60 及以上版本依赖CocoaPods安装。CocoaPods的仓库在国内也很难访问。如果在CocoaPods的安装步骤卡很久,可以试一下这个国内镜像(https://mirror.tuna.tsinghua.edu.cn/help/CocoaPods/

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

Hello-World

工程初始化

1
npx react-native init AwesomeProject 
  • 提示:你可以使用–version参数(注意是两个杠)创建指定版本的项目。例如npx react-native init MyApp –version 0.44.3。注意版本号必须精确到两个小数点。

  • 安装CocoaPods失败

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    //对于旧版的 CocoaPods 可以使用如下方法使用 tuna 的镜像:

    $ pod repo remove master
    $ pod repo add master https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git
    $ pod repo update
    //新版的 CocoaPods 不允许用pod repo add直接添加master库了,但是依然可以:

    $ cd ~/.cocoapods/repos
    $ pod repo remove master
    $ git clone https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git master
    //最后进入自己的工程,在自己工程的podFile第一行加上:

    source 'https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git'
  • xcode问题 – 不是根本

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    $ xcrun -k --sdk iphoneos --show-sdk-path
    xcrun: error: SDK "iphoneos" cannot be located
    xcrun: error: SDK "iphoneos" cannot be located
    xcrun: error: unable to lookup item 'Path' in SDK 'iphoneos'

    $ xcode-select --print-path
    /Library/Developer/CommandLineTools

    $ xcode-select --switch /Library/Developer/CommandLineTools
    xcode-select: error: --switch must be run as root (e.g. `sudo xcode-select --switch <xcode_folder_path>`).

    $ sudo xcode-select --switch /Library/Developer/CommandLineTools
  • 最终问题在于xcode location ci 配置

运行

1
2
3
4
cd AwesomeProject
yarn ios
# 或者
yarn react-native run-ios

参考文献

RN

使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏