ReactNative进阶（一）：ReactNative 学习资料汇总(1)

最新推荐文章于 2024-05-08 16:23:40 发布
原创 最新推荐文章于 2024-05-08 16:23:40 发布 · 391 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react native #react.js #javascript

博主开发遇瓶颈选择移动端开发，搭建Mac开发环境耗时久。文中列举常见问题，如打不开不明开发者软件、安装Homebrew出错、找不到tools.jar等，并给出对应解决办法，还介绍了Mac文档光标定位技能、delete键用法，最后给出前端学习和求职建议。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在Vue开发一段时间后，发觉自己遇到了瓶颈期。需要学习新技能激活自己，选择ReactNative开发移动端。

首先在环境搭建方面，自己时花费了2天的时间才将开发环境搭建好，有点费事费力，

设备选择：
在这里插入图片描述
环境搭建过程中，居然还区分芯片，也是醉了。

三、常见问题

3.1【MAC】打不开“XXXX Installer”，因为它来自身份不明的开发者。

MAC经常会安装一些非AppStore的软件会报安全提示，由于苹果系统安全策略问题。隔空传送接收的文件也会遇到上面的问题。

打不开“XXXX Installer”，因为它来自身份不明的开发者。

在这里插入图片描述
此时查看一下设置
在这里插入图片描述

3.2 mac 安装homebrew出错 Failed to connect to raw.githubusercontent.com port 443: Connection refused error

应用如下命令安装homebrew时，

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

开始一直报错Failed to connect to raw.githubusercontent.com port 443: Connection refused error: Error: 7，

原因：由于某些你懂的因素，导致GitHub的raw.githubusercontent.com域名解析被污染了。

解决办法：通过查询查询真实IP，然后修改hosts解决此问题。

在https://www.ipaddress.com/查询raw.githubusercontent.com的真实IP。
在这里插入图片描述
可知，该域名对应实际IP为4个，选择其中一个IP进行hosts文件配置即可。

修改hosts

sudo vim /etc/hosts

添加如下内容：

185.199.111.133 raw.githubusercontent.com
3.3 Could not find tools.jar. Please check that /Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/Home contains a valid JDK installation.
3.3.1 解决方法一：

在~/.zshrc (或 ~/.bashrc )文件中加入一句

export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_91.jdk/Contents/Home

注：根据自己的实际JDK路径修改上面的JDK路径。
查看JDK位置的命令 /usr/libexec/java_home -V（在MacOS11.1，执行这个命令可能看到两个路径，一个是JDK的实际路径，另一个是：/Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/Home(这个是JRE路径）。

3.3.2 解决方法二：

下载最新版的JDK并安装：

点击下载

解决方法三：手动复制 tools.jar

执行如下操作：

sudo cp /Library/Java/JavaVirtualMachines/jdk1.8.0_211.jdk/Contents/Home/lib/tools.jar /Library/Internet\ Plug-Ins/JavaAppletPlugin.plugin/Contents/Home/lib

注：根据自己的实际JDK路径修改上面的JDK路径

3.4 查看环境变量配置

在项目终端安装完brew之后，在另一项目下，输入brew -v ,提示“command not found”，怀疑是由于环境变量为配置导致的，执行如下操作：

vim ~/.zshrc

在文档中追加如下内容：

# 如果你不是通过Android Studio安装的sdk，则其路径可能不同，请自行确定清楚
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=/opt/homebrew/bin/:$PATH
export JAVA_HOME=/Library/Java/JavaVirtualMachines/adoptopenjdk-8.jdk/Contents/Home

保存之后，执行source ~/.zshrc ，使环境变量实时生效。

3.4.1 附：stack Overflow关于此问题的讨论
3.5 Error: EMFILE: too many open files错误

构建项目时终端反复出现Error: EMFILE: too many open files错误，经排查是因为项目较大，发布过程中已经超过了mac默认的文件监听上限，错误信息如下：
在这里插入图片描述

解决方式也比较简单，只要修改文件最大上限即可。

首先打开终端，输入launchctl limit并回车，可以看到下图：
在这里插入图片描述

注意，上图我是已经修改过了，正常情况最后一行的maxfiles为maxfiles 256 unlimited，因为只有256，确实很容易超出。

再次输入sudo launchctl limit maxfiles 524288 524288并回车，这里会提示输入密码：
在这里插入图片描述
这里的密码就是mac解锁密码，输入密码后即设置成功，再次输入launchctl limit回车，可以看到已经修改成功。

当然上述命令中的524288并不是硬性要求，随便什么数字都行，具体也请根据自身电脑配置情况来设置。

四、补充技能

由于之前均是使用公司Windows系统进行项目开发，现在使用个人Mac进行开发，Linux命令操作均需要进行技能学习。

先补充下，Mac下文档光标定位技能。

  • 「Command + 方向键上」将光标快速移动到整篇文本开头，类似的，「Command + 方向键下」快速移动到文章结尾。
  • 「Option + 方向键上」将光标移动到当前段落的开头，「Option + 方向键下」移动到当前段落的末尾。

需要注意，如果光标在段落的开头，「Option + 方向键上」可以将光标移动到上一段落的开头，而光标在段落结尾时，「Option + 方向键下」则将光标移动到下一段落的结尾。

  • 「Command + 方向键左」，将光标移动到句子的开头，「Command + 方向键右」，则是移动到句子的末尾。
  • 「Option + 方向键左」，将光标移动到前一个单词，「Option + 方向键右」，将光标移动到单词。这里有几点要注意一下：
  • 如果光标的初始位置在单词的开头，向前移动时，自动移动到前一个单词的开头。
  • 如果光标的初始位置在单词的结尾，向后移动时，自动移动到后一个单词的结尾。
  • 如果光标的初始位置在单词中间，则光标向前移动时，移动到当前单词的开头，向后移动时，移动到当前单词的结尾。
  • 以按下组合键「Option + Shift + 方向键上」，即可选中光标所在位置到段落开头的所有文本。按下「Option + Shift + 方向键下」，则是选中光标所在位置到段落结尾的所有文本。
  • 「Option + Shift + 方向键左/右」可以选中一个单词，「Command + Shift +左/右」可以选中一句话。

五、mac中delete键的5种用法

第一种：按 delete 键，实现 Windows 键盘上退格键的功能，也就是删除光标之前的一个字符（默认）；

总结

前端资料汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  • 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

  • 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

  • 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

  • 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
    喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

2401_84433924
关注
React Native学习资源汇总
xiangzhihong8的专栏
08-01 2563
目前主流的移动跨平台技术方案大体可以分为三类，一类是使用原生内置浏览器加载HTML5的Hybrid技术方案，采用此种方案的主要有Cordova、Ionic和微信小程序；另一类是使用JavaScript语言进行开发，然后使用原生组件进行渲染，采用此方案的主要有React Native、Weex和快应用；最后一类是使用自带的渲染引擎和自带的原生组件来实现跨平台，采用此种方案的主要是Flutter。 对于其他的浏览器方案，基本可以抛弃了，现在我们讨论移动跨平台开发主要说的是React Native和Flutter
2024年ReactNative进阶（十四）：初探 Gradle_react native gradle(1)，前端面试题集2024版
2401_84436095的博客
05-04 658
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】个人将这段时间所学的知识，分为三个阶段：第一阶段：HTML&CSS&JavaScript基础第二阶段:移动端开发技术第三阶段:前端常用框架推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；
React Native学习资料
牛八少爷的专栏
08-22 887
官网： React 官方网站：https://reactjs.org/ React Github网址：https://github.com/facebook/react   React Native官方网站：https://facebook.github.io/react-native/ React Native Github网址：https://github.com/facebook/...
React Native 学习资料汇总
黑夜の骑士的博客
12-08 389
一、背景 有没有不错的React Native 学习资料呢？当然有的，这里骑士给大家推荐两个网站。 二、网站 React-Native学习指南： https://github.com/reactnativecn/react-native-guide 令人惊叹的React-Native：https://github.com/jondot/awesome-react-native 三、注意事项 1.大家好，我是黑夜の骑士，欢迎大家关注我的博客，笔者将持续输出BIM相关软件开发、移动互联网开发以及游戏编程
React Native学习资料汇总
qj918的博客
02-18 336
React Native 中文网站: https://reactnative.cn/ React Native 英文网站: https://facebook.github.io/react-native/ React Native 高质量学习资料汇总: https://www.jianshu.com/p/454f2e6f28e9 React Native详细入门指南: https://juejin...
react native进阶
09-04 246
一、前沿||潜心修心，学无止尽。生活如此，coding亦然。本人鸟窝，一只正在求职的鸟。联系我可以直接微信：jkxx123321 二、项目总结 　　**||**文章参考资料：1. http://blog.csdn.net/u011272795/article/details/73824558 　　　　　　　　　　　2.http://blog.csdn.net/qq_2...
ReactNative全攻略：学习资源大汇总
"ReactNative资料汇总，包括学习指南、教程、ReactNative...这份ReactNative资料汇总是一个全面的学习资源集合，涵盖了从基础到进阶的所有内容，对于想深入学习和掌握ReactNative的开发者来说，是一份极其宝贵的资料。
【移动应用开发】VIP学习资源整合：涵盖Android、iOS、React Native及Flutter的开发工具、资源与社区
最新发布
04-07
对于跨平台开发，重点介绍了React Native和Flutter的相关学习资料。此外，还列举了Android Studio、Xcode等常用开发工具及其配套调试工具，以及Flutter Gallery、React Native Showcase等开源项目作为实践参考。最后...
ReactNative进阶（二十）：Could not connect to development server_rn could not connect to development server
2401_84446580的博客
05-08 274
小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
ReactNative进阶（十二）：本地存储 AsyncSt
2301_79125642的博客
08-15 153
很高兴可以在中金所技术公司工作，公司的技术大牛很多，在这里能有很多学习的机会。其次，公司食堂好，位置便利，门口就是地铁站，马上要搬新大楼了，超级高大上的。假期家里人介绍了去步步高运维工程师岗实习，感受一般般，不推荐大家来，主要是工资水平不高，对于个人发展的前景不是特别好。如题，本来用的很好的，结果突然前几天显示网络连接失败，就一直连不上了。记录一下找工作过程2023/8/15 16:30-16:421.让做3分钟的自我介绍（我介绍了大概1min）2.没有简历让我投屏简历，然后开始介绍项目，详细说。
React-Native进阶_7.TextInput实现搜索功能
08-03
前面使用TabBar 实现了底部tab标签，通过stackNavigator 实现了页面跳转，接下来，使用TextInput 来实现一个搜索功能。 TextInput 属性比较多，不一一介绍，具体可以百度搜索或者结合源码。
ReactNative 学习资源大汇集
weixin_34337381的博客
05-19 286
React Native着力于提高多平台开发的开发效率 —— 仅需学习一次，编写任何平台。(Learn once, write anywhere)。 本文汇集了React-Native各类学习资源，方便大家学习，同时还有 [Awesome React Native系列]，请收下！(github.com/jondot/awes… 目录 教程 React Nativeb.com/reactnat...
ReactNative 学习总结 个人梳理
qq_50909707的博客
11-14 7566
ReactNative官方文档：React Native 中文网 · 使用React来编写原生应用的框架ReactNative适用于APP的一套多开，适合大型项目的开发，安装环境时注意版本对应。 2、ReactNative的布局默认为flex布局，View标签不能直接写入文字，样式不会被继承, 单位不能加px,vh,vw等可以是百分比。 3、快速获取屏幕尺寸，Dimensions flex布局见我的博客：Flex布局总结_Dragon Wu的博客-CSDN博客_flex布局总结案例代码：同样使用Re
React Native之React速学教程
小平果的欢乐谷
01-08 2011
本文出自《React Native学习笔记》系列文章。 React Native是基于React的，在开发React Native过程中少不了的需要用到React方面的知识。虽然官方也有相应的Document，但篇幅比较多，学起来比较枯燥。 通过《React Native之React速学教程》你可以对React有更系统和更深入的认识。为了方便大家学习，我将《React Native之React速学...
ReactNative学习笔记（二）基础进阶
weixin_33736649的博客
03-15 112
一个最简单的HelloWorld页面 先不多解释，直接上代码： import React, { Component } from 'react'; import {AppRegistry, StyleSheet, Text, View} from 'react-native'; export default class helloworldComponent extends Component ...
从零开始React Native的基础知识大纲
爱孔孟
03-24 658
在学习React Native之前，你需要先搭建好React Native的开发环境。在学习React Native之前，你需要先掌握一些基础知识，例如JavaScript、ES6语法、React等。在实际应用中，很多应用都需要与服务器进行交互，因此你需要学习如何在React Native中进行网络请求。你需要学习React Native中的路由管理框架，例如React Navigation或React Native Router Flux等。第三步，学习React Native的组件。
ReactNative进阶（一）：ReactNative 学习资料汇总
IT全栈 华强工作室
05-07 2583
序 目前主流的移动跨平台技术方案大体可以分为三类， 使用原生内置浏览器加载HTML5的Hybrid技术方案，采用此种方案的主要有Cordova、Ionic和微信小程序； 使用JavaScript语言进行开发，然后使用原生组件进行渲染，采用此方案的主要有React Native、Weex和轻快应用； 使用自带的渲染引擎和自带的原生组件来实现跨平台，采用此种方案的主要是Flutter。 对于其他的浏览器方案，基本可以抛弃了，相比较React Native和Flutter，React Native和Flu.
react-native学习----------进阶指南
难得糊涂
11-28 1070
组件和API(第三方组件也很有用) React Native 提供了一些内置的组件。你可以在网站的左侧看到组件的完整列表。如果你不知道从哪看起，那么可以先看一下下面这个简单的分类：需要说明的是，你不会被局限在这些内置组件上。React Native 是大开源社区的作品，所以你还可以在 github 或是 npm 上搜索到带有react native关键字的大量的第三方组件。 基础组件 交互控...
React Native0.61进阶之图片
嘻哈包袱铺 专栏
11-07 561
静态图片资源 React Native 提供了一个统一的方式来管理 iOS 和 Android 应用中的图片。要往 App 中添加一个静态图片，只需把图片文件放在代码文件夹中某处，然后像下面这样去引用它： <Image source={require('./my-icon.png')} /> 图片文件的查找会和 JS 模块的查找方式一样。在上面的这个例子里，是哪个组件引用了这个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值