React-Native环境搭建流程

React-Native环境搭建流程 React-Native:0.63,React:17.0

对应系统对应不同环境:Mac->Xcode,Windows->AndroidStudio,RN->VSCode


希望这篇文章对你的问题可以有效地解决。防止以后忘记环境安装流程,对你以后更换工作并且又要重新环境有用处。蟹蟹!

文章目录

  • React-Native环境搭建流程 React-Native:0.63,React:17.0
  • 前言
  • 一、基本步骤
  • 二、创建项目
  • 三、部分问题解决方案
  • 总结


前言

不多bb,直接开造

以下是本篇文章正文内容,下面案例可供参考

一、基本步骤

基本步骤,搭建完直接启动就可以

命令行工具:(react-native-cli)npm install -g yarn react-native-cli

编译器: VSCode.RN开发

组件库:Node.组件下载库 Npm,国内还是用 Yarn。Node-versions>12

Android编译器:AndroidStudio.Android原生,其自带SDK

Android编译环境:JDK1.8.跑AS.JDK-versions>1.8

IOS编译环境:XCode.IOS原生,几十个G,下载完直接跑就ok

组件下载工具:
Npm:Node自带,不过国内用做最好在控制台cmd运行,npx nrm use taobao ,淘宝源
Yarn:npm install -g yarn,代替npm的国内工具下载效率更加快,npm可能要

IOS包管理器:CocoaPods.可以理解为ios的npm。0.60之后用来管理依赖的

Mac包集成管理器:Homebrew.可以用来安装Node & Watchman啥的.brew install node

监视文件变更:Watchman.(packager 可以快速捕捉文件的变化从而实现实时刷新).热加载


二、创建项目

1.创建项目文件
npx react-native init Demo --version X.XX.X   下载成功后在你这个运行的cmd控制台文件夹里面找到你初始化的项目比如Demo

2.打开项目文件
(1.打开你创建项目Demo,在vscode里面找到即可
(2.并且在vscode里面新建一个终端
(3.检查项目结构里面是否有node_modules文件
(4.打开项目结构最底部的一个package.json文件的react版本和react-native版本

3.初始化项目
yarn install  或者  npm install   
正常来说你的Demo项目里面就已经有一个名叫node_modules的文件,这就是你下载的组件啥的七七八八都在里面

4.打开android项目文件
(1.打开AndroidStudio后
(2.点击第二个Open an Existing Project
(3.找到你在之前init创建的Demo项目并在你项目里面找到你的android文件。
这就是你的android项目,原生代码放置处,一些关于原生的地方就在这写,ios也是。
检查有无错误。检查是否连接手机。检验JDK路径。检验SDK是否下载。检验Gradle版本是否对应AndroidStudio

5.连接USB手机
(1.一台安卓手机
(2.连接USB数据线
(3.打开USB文件传输模式
(3.打开手机开发者模式。小米手机>我的设备>全部参数>点击MIUI版本>开发者选项>打开USB调试和USB安装

6.启动项目
直接在VScode中的终端控制台运行 react-native run-android。可能无法连接需要映射端口adb reverse tcp:8081 tcp:8081
注意如果你用的是Mac启动的又是IOS,那就先启动服务react-native start,再启动模拟器react-native run-android



三、部分问题解决方案

部分问题解决,也有可能我写的有错误,欢迎大家来指正,防止本文章继续错下去。麻烦了

1.Npm和JDK版本问题
答:注意 Node 的版本应大于等于 12,而 JDK 的版本必须是 1.8(目前不支持 1.9 及更高版本)。

2.npm下载时间速度太慢甚至卡住
答:切换淘宝源。使用nrm工具切换淘宝源 npx nrm use taobao或者使用yarn替代 npm  npm install -g yarn

3.下载cocoapods速度过于慢
答:
	ctrl+c中断
	$ brew install cocoapods 
	$ cd ios
	$ pod install --repo-update
用brew来装cocoapods,然后到项目目录里更新
中途遇到SDK “iphoneos” cannot be located错误,参照来指定command路径,然后重新pod install --repo-update

总结

这里就是本文章的所有内容,希望对你有所帮助。ReactNative官网项目搭建流程.谢谢大家

你可能感兴趣的:(React-Native,react,native)