RN环境配置

-------------如果你使用的是Mac OS系统,请参照以下步骤-----------

安装前注意:
  • 在Max OS X 系统中,homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复:
sudo chown -R `whoami` /usr/local
  • 如果命令行提示command not found,请加上sudo获得最高权限

一、环境需求

1) 安装Homebrew

Homebrew是OS X的套件(包)管理器,用于安装Node.js和一些其他必须的工具软件。

  • 安装方式:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
2) 安装npm 和 Node.js

Node.js最好安装最新版本,node安装成功后npm自动也就有了,直接下载安装Node.js,网址:https://nodejs.org/en/download/ ,可以以软件形式安装,或者命令行形式安装:

brew install node
3) 安装WatchMan

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

brew install watchman
  • 验证是否安装成功

验证是否安装成功

二、React Native安装

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

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

2)查看是否安装成功

全局node_moudules中查看

三、Xcode安装

React Native 目前需要Xcode 10 或更高版本。我们可以通过 App Store 或是到Apple 开发者官网上下载。安装完Xcode会同时安装 Xcode IDE、Xcode 的命令行工具和 iOS 模拟器。

四、JDK 和 Android Studio

1) 安装最新版的JDK

在命令行中输入 javac -version来查看你当前安装的JDK版本。下载安装地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html (资料中已经存放)

  • 安装Android studio,在安装过程中请严格执行以下选项:

1、选择 Custom 选项

image

2、勾选PerformanceAndroid Virtual Device

image

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

image

4、在SDK Platforms窗口中,选择Show Package Details,然后在Android 9.0 (Pie)中勾选下图所示并安装。

image

image

5、在SDK Tools窗口中,选择Show Package Details,然后在Android SDK Build Tools中勾选Android SDK Build-Tools 28.0.3(必须有这个版本)。

image

6、ANDROID_HOME环境变量

React Native 需要通过环境变量来了解你系统中的 Android SDK 装在什么路径,从而正常进行编译。具体的做法是把下面的命令加入到~/.bash_profile文件中,使用 vi ~/.bash_profile。

# 如果你不是通过Android Studio安装的sdk,则其路径可能不同,请自行确定清楚。
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/emulator
2) 安装Genymotion

Genymotion是一个第三方模拟器,它比Google官方的模拟器更易设置且性能更好。但是,它只针对个人用户免费(可能需要VPN)。

  • 下载并安装Genymotion(https://www.genymotion.com/)
  • 打开Genymotion,如果你尚未安装VirtualBox,它有可能会提示你安装
  • 创建一个模拟器并启动
  • 按下⌘+M可以打开开发者菜单(在安装并启动了React Native应用之后)
3)Gradle Daemon

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

-------------如果你使用的是Windows系统,请参照以下步骤-----------

一、确保所有的命令行操作都在管理员权限下操作

二、需要安装的插件

1) Chocolatey

Chocolatey是一个Windows上的包管理器,类似于Mac上的watchMan。一般的安装步骤应该是下面这样, 如果国内访问失败, 请使用翻墙工具:

2) Python 2
choco install python2
3)Node
choco install nodejs.install

打开命令提示符窗口,使用Chocolatey来安装NodeJS,或者通过软件安装。安装完node后建议设置npm镜像以加速后面的过程(或使用科学上网工具)。

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

-------------创建并运行React Native项目-----------

一、 React Native的第一个应用

1)执行命令,生成一个工程
react-native init 项目名称

注意:由于众所周知的网络原因,需要等待一段时间(具体视网络情况而定)。react-native命令行从npm官方源拖代码时会遇上麻烦,可以将npm仓库源替换为国内镜像:

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
2)运行截图

image

3)运行工程文件

不管是 iOS 还是 Android,在开发调试阶段,都需要在 Mac 上启动一个 HTTP 服务,称为Debug Server,默认运行在8081端口,APP 通 Debug Server 加载 js。

图1 - 启动React native 服务器

图2 - 客户端运行界面

4) 把React Native创建的应用跑在Android上
  • 命令行执行cd MyRNDemo,路径切换到项目主目录
  • 命令行执行react-native run-android进行加载运行android 应用。
  • 使用编辑器进行打开和修改index.android.js文件,接着通过菜单按钮选择Reload JS来进行刷新修改

二、管理React Native库的版本

在开发中,会经常的去控制React Native的版本库,得以适配各种条件下的开发,那该如何查看、控制ReactNative的版本呢?

1)查看本地的React Native的版本
  • 命令行输入:
react-native --version
  • 命令行效果:

image

2) 更新本地的React Native的版本
  • 命令行输入:
npm update -g react-native-cli
3)查询react-native的npm包最新版本

NPM的全称是Node Package Manager ,是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。

  • npm包地址 :
 https://www.npmjs.com/package/react-native
  • 命令行查询:
npm info react-native
  • 查询效果:
    image

  转载请注明: 小浩之随笔 RN环境配置

 上一篇
RN常用的组件-中 RN常用的组件-中
一、TextInput 文本输入框,相当于OC中的UITextField,在用法和属性方面,两者都有很大的借鉴之处:通过键盘将文本输入到应用程序的一个基本的组件。 本组件的属性提供了多种特性的配置,譬如自动完成、自动大小写、占位文字,以及多
2020-08-29
下一篇 
RN的Flex布局 RN的Flex布局
一、FlexBox布局 1.1 FlexBox是什么意思呢? flexible(形容词):能够伸缩或者很容易变化,以适应外界条件的变化 box(名词):通用的矩形容器 1.2 什么是FlexBox布局? 弹性盒模型(The Flexi
2020-08-29
  目录