JavaScriptReactNative

环境搭建

Mac 环境搭建

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 安装node
brew install node

# 安装文件监控，方便开发
brew install watchman

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

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

# Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载
npm install -g yarn

# 安装java环境

# 安装Android开发环境

Hello World

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 新建项目
npx react-native init AwesomeProject

# 使用固定版本创建新项目
npx @react-native-community/cli init example --version 0.71.3


# 启动Metro
npm start 
yarn start

# 运行Android端
npm run android
yarn android
npm run ios
yarn ios

# 指定设备
yarn react-native run-ios --device="iPhone 6S "

端口配置

1
2
3
4
5
6
7
8

# 启动metro修改端口，建议使用这种方式
npm run start --verbose -- --port 8082

# 默认会监听8081端口
# 配置环境变量指定端口，未验证是否有效
export RCT_METRO_PORT=9091
npx react-native start --port 9091

nvm

推荐使用nvm来做node多版本管理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 查看已安装的node版本
nvm list

# 安装指定版本
nvm install v12.18.3

# 卸载指定版本
nvm uninstall v12.18.3

# 当前项目指定node版本
nvm use v12.18.3

# 设置全局默认版本
nvm alias default v12.18.3

参考