首页 > 其他分享 >React Native V0.64.4版本 开发环境搭建及问题

React Native V0.64.4版本 开发环境搭建及问题

时间:2022-12-16 17:34:24浏览次数:54  
标签:install -- com V0.64 React https pod 安装 Native

一、开发环境依赖安装 

必须安装的依赖有:Node、Watchman、Xcode 和 CocoaPods。

brew安装及问题:

苹果电脑标准安装脚本:

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

1、系统权限需要管理员

2、有权限后公司内网可能无法访问raw.githubusercontent.com、gitee.com导致安装失败

解决方法:

使用其它镜像安装

参考:

https://mirror.tuna.tsinghua.edu.cn/help/homebrew/

https://gitee.com/cunkai/HomebrewCN/

如果上面的脚本无法安装可以尝试把 https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh 下载到本地执行

brew install node

npm install -g yarn

brew install watchman

watchman本地安装

https://facebook.github.io/watchman/docs/install.html

$ unzip watchman-*-macos.zip
$ cd watchman-vYYYY.MM.DD.00-macos
$ sudo mkdir -p /usr/local/{bin,lib} /usr/local/var/run/watchman
$ sudo cp bin/* /usr/local/bin
$ sudo cp lib/* /usr/local/lib
$ sudo chmod 755 /usr/local/bin/watchman
$ sudo chmod 2777 /usr/local/var/run/watchman

 

Android Studio 安装

JAVA环境

React Native 需要 Java Development Kit [JDK] 1.8(暂不支持 1.9 及更高版本,注意 1.8 版本官方也直接称 8 版本)可以使用homebrew安装:

brew install adoptopenjdk/openjdk/adoptopenjdk8

javac -version(请注意是 javac,不是 java)来查看你当前安装的 JDK 版本。

export JAVA_HOME="/Library/Java/JavaVirtualMachines/jdk1.8.0_211.jdk/Contents/Home"
export PATH="$JAVA_HOME/bin:$PATH"
export CLASSPATH="$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar"

 

安装 Android Studio 参考:https://reactnative.cn/docs/0.64/environment-setup,建议选择自定义安装

配置 ANDROID_HOME 环境变量

export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
export PATH=$PATH:$ANDROID_SDK_ROOT/tools
export PATH=$PATH:$ANDROID_SDK_ROOT/tools/bin
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools

CocoaPod安装

参考清华镜像源:https://mirror.tuna.tsinghua.edu.cn/help/CocoaPods/

pod install 报无法访问github.com解决方法,可以将这个依赖包的下载地址修改成镜像域名,

例如将~/.cocoapods/repos/master/Specs/0/0/0/LiucyNet/0.1.0/LiucyNet.podspec.json中source 对应的 github.com更新镜像域名。

其它国内镜像

https://doc.fastgit.org/CocoaPods/Specs.git

https://gitclone.com/CocoaPods/Specs.git

https://gitee.com/mirrors/CocoaPods/Specs.git

https://github.com.cnpmjs.org/CocoaPods/Specs.git

https://gitcafe.com/akuandev/Specs.git

  

cd  ~/.cocoapods/repos/master/ 

git clone https://github.com/CocoaPods/Specs.git

pod相关命令:

# 第一次使用安装框架    

# 只用安装一次,之后使用添加删除都用 pod update --no-repo-update

pod install

pod search AFNetworking

pod install --no-repo-update

pod install --verbose --no-repo-update  安装框架,不更新本地索引,速度快

pod repo remove master 

pod repo list 

pod repo update

pod repo


Ruby安装及问题

https://ruby-china.org/wiki/rbenv-guide

ruby 源检查:gem sources -l

移除:gem sources --remove https://rubygems.org/

替换添加国内的镜像源:gem sources --add https://gems.ruby-china.com

https://ruby-china.org/wiki/rbenv-guide

https://www.jianshu.com/p/d1d2e68984ef

git clone https://hub.nuaa.cf/libevent/libevent.git

 

环境变量不生效问题 

切换终端到bash

chsh -s /bin/bash

切换终端到zsh

chsh -s /bin/zsh

 

二、React Native Web开发

工具安装

npm install --global expo-cli

npm install -g react-native-cli

脚手架使用:

指定版本:npx react-native init AwesomeProject --version 0.66.0 

指定模版:npx react-native init AwesomeTSProject --template react-native-template-typescript

Expo指定版本:expo init --template expo-template-blank@sdk-43 

备注:RN0.64.4 需要使用 exp sdk v43这个版本,否则可能会出版本兼容问题

EXPO SDK及模板的版本情况可以查询:https://github.com/expo/expo/blob/sdk-43/templates/expo-template-blank/package.json

如果之前在模拟器中安装过高版本,可以先删除模拟器中的expo go 重新使用 yarn android 时会根据当时版本重新下载安排对应的app

 

三、调试相关工具

查看可用的iOS设备:xcrun simctl list devices   

查看可用的Android设备:adb devices   

查询模拟器:emulator -list-avds

打开模拟器:emulator -avd Pixel_3a_API_33_x86_64

vscode插件: 

真机开发时,调试应用只需要晃动下设备即可打开调试选项

Android模拟器调试的快捷键是【Command +M】

iOS模拟器的快捷键是【Command +D】

chrome 开发者工具

快捷键【Command +Option +I】即可打开调试窗口   

     

四、其它开发资源

React Native 端开发前注意

https://taro-docs.jd.com/docs/react-native-remind

React Navigation中文文档

https://www.reactnavigation.org.cn/docs/guide-quick-start

React Native中文文档

https://reactnative.cn/docs/0.64/environment-setup

Expo SDK 升级信息,查看版本升级情况

https://docs.expo.dev/workflow/upgrading-expo-sdk-walkthrough/

Expo沙盒工具简介

https://www.cnblogs.com/marsk6/p/15221411.html

开发环境搭建

https://juejin.cn/post/7135641433834258445

android-studio-emulator模拟器安装

https://docs.expo.dev/workflow/android-studio-emulator/?redirected

 

 

 

 

标签:install,--,com,V0.64,React,https,pod,安装,Native
From: https://www.cnblogs.com/terrylin/p/16987685.html

相关文章

  • Java中Native关键字的作用
    初次遇见native是在java.lang.Object源码中的一个hashCode方法:​​publicnativeinthashCode();​​为什么有个native呢?这是我所要学习的地方。所以下面想要总结下nati......
  • 2022前端高频react面试题集锦
    Redux原理及工作流程(1)原理Redux源码主要分为以下几个模块文件compose.js提供从右到左进行函数式编程createStore.js提供作为生成唯一store的函数combineReducers.......
  • 腾讯前端常考react面试题(持续更新中)
    解释React中render()的目的。每个React组件强制要求必须有一个render()。它返回一个React元素,是原生DOM组件的表示。如果需要渲染多个HTML元素,则必须将它们组......
  • 你是如何使用React高阶组件的?
    HighOrderComponent(包装组件,后面简称HOC),是React开发中提高组件复用性的高级技巧。HOC并不是React的API,他是根据React的特性形成的一种开发模式。HOC具体上就是一个接受......
  • react 配置代理
    //配置代理项目中自带(http-proxy-middleware)constproxy=require('http-proxy-middleware')module.exports=function(app){  app.use(    proxy......
  • c# WinForm--微信Native支付
    一、了解Native支付流程我用的是模式二,模式二的流程如下二、如何将Demo用在我的WinForm里面打开Demo工程,复制里面的lib、third文件夹到我的工程下,添加引用,引用的内容......
  • 常见react面试题
    React组件命名推荐的方式是哪个?通过引用而不是使用来命名组件displayName。使用displayName命名组件:exportdefaultReact.createClass({displayName:'TodoApp',/......
  • React + antd (版本:5)jsx使用Tree组件的经验
    //组件:LeftTree.jsximportReactfrom"react";import{Tree}from"antd";import*asservicefrom"../../util/service";classLeftTreeextendsReact.Compo......
  • 一道React面试题把我整懵了
    提问:react项目中的JSX里,onChange={this.func.bind(this)}的写法,为什么要比非bind的func=()=>{}的写法效率高?声明:由于本人水平有限,有考虑不周之处,或者出现错误的,请......
  • unix网络编程2.6——高并发服务器(七)基于epoll&&reactor实现web_socket服务器
    目录系列文章unix网络编程1.1——TCP协议详解(一)unix网络编程2.1——高并发服务器(一)基础——io与文件描述符、socket编程与单进程服务端客户端实现unix网络编程2.2——高并......