React Native开发环境搭建(2022年)

由于我的M1的Mac搭建了flutter3新的环境,为了防止跟React Native (简称RN)的环境冲突,我使用旧的macbook Pro2014 来搭建RN的开发环境

参考React Native 中文网
在写文章时候已经更新到RN 7.0版本;以往经验,新版本多少都带点坑,所以我安装稍微低点的版本 选择了0.68.0

iOS 开发环境必须安装的依赖有：Node、Watchman、Xcode 和 CocoaPods
Android 必须安装的依赖有：Node、JDK 和 Android Studio

由于我本机之前开发过flutter,所以已经有个iOS和Android的开发环境,所以iOS只需要安装Node、Watchman 就行了

1.使用Homebrew来安装 Node 和 Watchman

brew install node
brew install watchman

安装完 Node 后建议设置 npm 镜像（淘宝源）以加速后面的过程;
如果没有使用科学上网的需要使用下面命令nrm工具切换淘宝源

我这边使用科学上网,所以就不设置 npm 镜像为淘宝源了;就跳过这一步了

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

2.安装Yarn

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

npm install -g yarn

注意:安装node之前最好升级homebrew版本,不然安装的node版本可能偏低,最好先执行 brew update 更新版本

我的开发环境

MacOS V11.7
Xcode 13.0
Android Studio 2021.2.1(build on 2022.5)
cocoapods版本：1.11.2
node版本：v18.11.0

初始化项目
npx react-native init xx项目名 --version X.XX.X

npx react-native init xx项目名 --version X.XX.X
例如:
npx react-native init MyRNProject --version 0.68.0

运行iOS项目使用如下命令

cd MyRNProject
yarn ios
# 或者
yarn react-native run-ios

第一次打开RN项目建议iOS 也可以手动到工程目录,用Xcode打开顺利iOS项目;因为第一运行cocoapos会各种报错;

运行安卓命令

cd AwesomeProject
yarn android
# 或者
yarn react-native run-android

安装VSCode 插件

ES7+ React/Redux/React-Native snippets

React-Native snippets 常见快捷键

快捷键地址

React Native Components 快捷键

rmp 快捷导入

rnc

import React, { Component } from 'react'
import { Text, View } from 'react-native'
export default class FileName extends Component {
  render() {
    return (
      
         $2 
      
    )
  }
}

rnf

import React from 'react'
import { View, Text } from 'react-native'
export default function $1() {
  return (
    
       $2 
    
  )
}

rnfs

import React from 'react'
import { StyleSheet, View, Text } from 'react-native'
export default function $1() {
  return (
    
       $2 
    
  )
}
const styles = StyleSheet.create({})

rnfe

import React from 'react'
import { View, Text } from 'react-native'
const $1 = () => {
  return (
    
       $2 
    
  )
}
export default $1

rnfes

import React from 'react'
import { StyleSheet, View, Text } from 'react-native'
const $1 = () => {
  return (
    
       $2 
    
  )
}
export default $1
const styles = StyleSheet.create({})

rncs

import React, { Component } from 'react'
import { Text, StyleSheet, View } from 'react-native'
export default class FileName extends Component {
  render() {
    return (
      
         $2 
      
    )
  }
}
const styles = StyleSheet.create({})

rnce

import React, { Component } from 'react'
import { Text, View } from 'react-native'
export class FileName extends Component {
  render() {
    return (
      
         $2 
      
    )
  }
}
export default $1