Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[新手必读]RN环境搭建/入门学习的一些注意事项 #77

Open
sunnylqm opened this issue Mar 13, 2020 · 35 comments
Open

[新手必读]RN环境搭建/入门学习的一些注意事项 #77

sunnylqm opened this issue Mar 13, 2020 · 35 comments
Labels
Stale

Comments

@sunnylqm
Copy link

sunnylqm commented Mar 13, 2020 •
edited
Loading

一切非官方博客、教程、讨论仅供参考，请始终以官方文档（请思考什么是官方？）为准

请避免在用户名、目录名、文件名、变量名等处使用中文、空格等特殊字符。

工具链中任意一处对特殊字符处理不好就会导致莫名其妙且难以察觉的错误。不要挖这样的坑。请不要使用和核心模块同名的目录名（如react,react-native等，父目录也不行）。也请不要单独使用编程语言中常见的关键字作为目录名（如class, native, new, package等等）

完整原生环境 VS 简易沙盒环境(CRNA / Expo)

推荐配置完整原生环境，虽然，比较麻烦😓
沙盒环境依赖于国外网络环境，不能直接发布应用，
也不能安装国内所常用的原生依赖库。不建议国内用户使用。

我只有Windows电脑，可以同时编写两个平台的代码吗？

可以。RN代码在逻辑层上是直接复用的，只是在不同平台上编译不同的原生“壳子”。注意事项：

  • 不要直接复制、移动项目，务必使用git管理和分发项目，不要上传node_modules目录。
  • 不要使用仅支持单平台的组件。

可以把代码移植到网页/小程序/……上吗？

官方并不直接支持其他平台。但github上可能有其他个人或组织提供了各种方案，
react-native-web, react-native-dom, reactXP, taro等等, 具体是否符合你的需求，需要你自己调研和评估。

推荐什么（免费）工具XX上网？

所有工具其实都是免费公开下载的，尽管其技术实现各有差异，但基本的原理都是依靠外面的服务器实现代理上网。然而服务器显然没有理由白白贡献给谁用，所谓的免费工具常常遭遇定时断开、限流、广告等也不难理解。要想获得稳定的网络，自己购买服务器，自己（学习）搭建代理是第一选择。请仅用于学习工作，不要用于非法用途。

为什么我使用了工具，网页也能打开，还是安装失败？

代理工具本身都需要对系统的网络配置进行介入和修改。这一过程有的可以自动配置，有的不能，有的甚至需要特定的工具或者协议转换。所以不代表所有工具都能自动让所有程序稳定访问代理（常见的例子是有的工具默认对浏览器做了配置，但命令行却没有生效）。相关知识和配置请自行研究学习。

关于版本选择

如果没有特殊需求，建立新项目始终选择默认的最新版本

  • RN仍然处于高速迭代中，并没有人建立全面的测试场景和标准，也没有人去做不同版本的评测，而官方基本只维护最新版本。

谨慎选择编译工具链版本

  • 所谓编译工具链是指JDK、Node、Xcode、Android Studio、Gradle、Python等编译RN时所依赖的底层工具，建议选择文档所要求的最低版本。

谨慎对待这些工具的更新提示，谨慎使用macOS的自动更新和brew的upgrade命令。如果不是相关领域的专家，请勿主动尝试新版本，尤其是大版本更新。

如果你的所有版本都符合文档要求，仍然遭遇错误，请不要犹豫，去issue区提出问题。

请分辨可靠的信息来源

信息可靠度排序（同时请结合考虑版本、修改时间等因素）：

  • Github官方仓库源码
  • 官方网站文档、官方博客
  • 官方网站文档翻译版
  • Github官方仓库issue版块的讨论

——————以下资料来源，如果没有官方出处，都不可靠

  • StackOverflow，专业论坛，博客， QQ群，贴吧，知道……

请使用Markdown语法

请任意找一篇教程熟悉md语法，例如 https://www.jianshu.com/p/191d1e21f7ed
提问时，请务必将你的代码用markdown语法扩起来，否则格式紊乱，难以阅读。
最基本的用法就是用三个撇号（数字1键左边）上下把代码包起来，像下面这样

f857e0c9-e558-42b5-a283-f7ac978d78f6-image

这样代码就会自动排版且带有语法高亮
@sunnylqm sunnylqm pinned this issue Mar 13, 2020
@linzhiju007
Copy link

大佬们，搭建React Native一定要安装最新版的Node吗？

@sunnylqm sunnylqm mentioned this issue Apr 26, 2020
Closed
@sunnylqm
Copy link
Author

@linzhiju007

所谓编译工具链是指JDK、Node、Xcode、Android Studio、Gradle、Python等编译RN时所依赖的底层工具，建议选择文档所要求的最低版本。

@linzhiju007
Copy link

linzhiju007 commented Apr 26, 2020 via email

@sunnylqm
Copy link
Author

sunnylqm commented Apr 27, 2020 •
edited
Loading

@linzhiju007 公开的建议就都在这里、网站上和之前的论坛里
此外可以考虑一对一的付费咨询

@linzhiju007
Copy link

linzhiju007 commented Apr 28, 2020 via email

@sunnylqm sunnylqm mentioned this issue May 4, 2020
Closed
@sunmze
Copy link

sunmze commented May 18, 2020 via email

@HelloWilliam
Copy link

第一次安装项目，在iOS里面执行pod install，卡住了是什么原因，墙的速度不够吗？

Downloading dependencies
Installing CocoaAsyncSocket (7.6.4)
Installing CocoaLibEvent (1.0.0)
Installing DoubleConversion (1.1.6)
Installing FBLazyVector (0.62.2)
Installing FBReactNativeSpec (0.62.2)
Installing Flipper (0.33.1)

@sunnylqm
Copy link
Author

是的，cocoapods的这些包下载都很困难

@LassZhang
Copy link

@sunnylqm cocoapods 这些包是不是需要科学上网 才能 pod install 成功

@LassZhang
Copy link

@HelloWilliam 最后怎么处理的，我的跟你一样，Pod install 很久

@LassZhang
Copy link

@HelloWilliam 这个是必需要 V科学上网 吧

@zhuhongyang
Copy link

rn 版本 0.62.2 创建导航栏
android 报错 “RNCSafeAreaProvider” was not found in the UIManager
Web 正常

@wu1210787810
Copy link

我的build.gradle文件里镜像源换成了阿里的镜像源 可是用yarn android命令的时候提示阿里镜像源是https无法验证是怎么回事

@daidaic
Copy link

daidaic commented Sep 3, 2020

大佬，一直卡在这里。。也科学上网了。。是什么原因导致的。。
Installing CocoaAsyncSocket (7.6.4)
Installing CocoaLibEvent (1.0.0)
Installing DoubleConversion (1.1.6)
Installing FBLazyVector (0.63.2)
Installing FBReactNativeSpec (0.63.2)
Installing Flipper (0.41.5)
Installing Flipper-DoubleConversion (1.1.7)
Installing Flipper-Folly (2.2.0)
Installing Flipper-Glog (0.3.6)
Installing Flipper-PeerTalk (0.0.4)
Installing Flipper-RSocket (1.1.0)
Installing FlipperKit (0.41.5)

@sunnylqm
Copy link
Author

sunnylqm commented Sep 3, 2020

说明还不够科学

@fupan1018
Copy link

看了这个说明，估计坑特别多

@sunnylqm
Copy link
Author

@fupan1018 这个说明适用于任何框架做app开发

@fengwei6666
Copy link

fengwei6666 commented Oct 10, 2020 •
edited
Loading

科学上网了，YouTube Google 都挺流畅的，但是这里还是一直失败，求教
user@userdeMacBook-Pro-3 ios % pod install
Analyzing dependencies
Fetching podspec for DoubleConversion from ../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec
Fetching podspec for Folly from ../node_modules/react-native/third-party-podspecs/Folly.podspec
Fetching podspec for glog from ../node_modules/react-native/third-party-podspecs/glog.podspec
Downloading dependencies
Installing CocoaAsyncSocket (7.6.4)
Installing CocoaLibEvent (1.0.0)
Installing DoubleConversion (1.1.6)
Installing FBLazyVector (0.63.3)
Installing FBReactNativeSpec (0.63.3)
Installing Flipper (0.54.0)
Installing Flipper-DoubleConversion (1.1.7)
Installing Flipper-Folly (2.2.0)
Installing Flipper-Glog (0.3.6)
[!] /bin/bash -c
set -e

@sunnylqm
Copy link
Author

@fengwei6666 浏览器能用不代表命令行能用

@wen81643956
Copy link

科学上网了，YouTube Google 都挺流畅的，但是这里还是一直失败，求教
user@userdeMacBook-Pro-3 ios % pod install
Analyzing dependencies
Fetching podspec for DoubleConversion from ../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec
Fetching podspec for Folly from ../node_modules/react-native/third-party-podspecs/Folly.podspec
Fetching podspec for glog from ../node_modules/react-native/third-party-podspecs/glog.podspec
Downloading dependencies
Installing CocoaAsyncSocket (7.6.4)
Installing CocoaLibEvent (1.0.0)
Installing DoubleConversion (1.1.6)
Installing FBLazyVector (0.63.3)
Installing FBReactNativeSpec (0.63.3)
Installing Flipper (0.54.0)
Installing Flipper-DoubleConversion (1.1.7)
Installing Flipper-Folly (2.2.0)
Installing Flipper-Glog (0.3.6)
[!] /bin/bash -c
set -e

刚好遇到了这个问题，你可以试试通过设置terminal的http代理：
% export http_proxy=http://127.0.0.1:1087;export https_proxy=http://127.0.0.1:1087;
然后再重新pod install

@XJIAL88
Copy link

XJIAL88 commented May 17, 2021

mac 搭建照着官网搭建环境运行报错

@HugoChaan
Copy link

对于m1 的macbook在操作上有没有什么变化呢？build的时候会crash

@sunnylqm
Copy link
Author

任何问题、报错，截图另开个帖子按格式详细说明
你说个报错，crash有什么用呢？等人上门看吗？

@yangyanqin11
Copy link

项目怎样实现滑动到一定的位置，进行顶部吸附效果

@sunwen0402
Copy link

使用kotlin构建的脚本 settings.gradle.kts ,无法解析 applyNativeModulesSettingsGradle(settings) 怎么解决啊?

@sunmze
Copy link

sunmze commented Sep 16, 2021

使用kotlin构建的脚本 settings.gradle.kts ,无法解析 applyNativeModulesSettingsGradle(settings) 怎么解决啊?

你这个是应该是gradle的版本不对导致的 ，先把gradle的版本对应上就ok了

@sunwen0402
Copy link

使用kotlin构建的脚本settings.gradle.kts，无法解析applyNativeModulesSettingsGradle(settings) 怎么解决啊？

你这个应该是gradle的版本不对导致的，先把gradle的版本对应上就ok了

使用kotlin构建的脚本settings.gradle.kts，无法解析applyNativeModulesSettingsGradle(settings) 怎么解决啊？

你应该是gradle的版本不对导致的，先把gradle的版本对应上就ok了

试了好几个版本都不行, 把.kts 去掉 换成groovy 编写是可以的

@SanpLee
Copy link

SanpLee commented Dec 7, 2021 •
edited
Loading

有没有指教怎么卡在 pod install 后怎么处理啊，新手学react-native 搭建环境劝退率这么高吗，开了vpn ，设置代理还是不行，
已经努力到这里了

➜ ios pod install
Analyzing dependencies
Fetching podspec for DoubleConversion from ../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec
Fetching podspec for RCT-Folly from ../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec
Fetching podspec for boost from ../node_modules/react-native/third-party-podspecs/boost.podspec
Fetching podspec for glog from ../node_modules/react-native/third-party-podspecs/glog.podspec
Downloading dependencies
Installing CocoaAsyncSocket (7.6.5)
Installing DoubleConversion (1.1.6)
Installing FBLazyVector (0.66.3)
Installing FBReactNativeSpec (0.66.3)
Installing Flipper (0.99.0)
Installing Flipper-Boost-iOSX (1.76.0.1.11)
Installing Flipper-DoubleConversion (3.1.7)

[!] Error installing Flipper-DoubleConversion
[!] /usr/bin/git clone https://github.com/priteshrnandgaonkar/double-conversion.git /var/folders/8f/fb9531_n3w5df7cjdknqchww0000gn/T/d20211207-14673-1e857vo --template= --single-branch --depth 1 --branch v3.1.7

Cloning into '/var/folders/8f/fb9531_n3w5df7cjdknqchww0000gn/T/d20211207-14673-1e857vo'...
fatal: unable to access 'https://github.com/priteshrnandgaonkar/double-conversion.git/': LibreSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443

@dongfangmeng
Copy link

请问以下，AS可以运行新建的安卓项目，但是rn0.66无法运行，怎么解决呢？`

首先报错error Failed to launch emulator. Reason: Emulator exited before boot..
warn Please launch an emulator manually or connect a device. Otherwise app may fail to la
unch.

然后是error Failed to install the app. Make sure you have the Android development environment s
et up: https://reactnative.dev/docs/environment-setup.
Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081
:ReactNative:Unexpected empty result of running '[node, E:\react虚拟项目\native\test-proj
ect\rn0.66\AwesomeProject\node_modules@react-native-community\cli\build\bin.js, config]'
command.
:ReactNative:Running '[node, E:\react虚拟项目\native\test-project\rn0.66\AwesomeProject\n
ode_modules@react-native-community\cli\build\bin.js, config]' command failed.

下面是关于终端的全部截图，希望前辈们指点一下

微信图片_20220112092525

微信图片_20220112092534

微信图片_20220112092541

@sunnylqm
Copy link
Author

sunnylqm commented Jan 12, 2022 via email

@dongfangmeng
Copy link

dongfangmeng commented Jan 12, 2022 via email

@sunnylqm
Copy link
Author

sunnylqm commented Jan 12, 2022 •
edited
Loading

@dongfangmeng
1、有任何问题应该开新帖而不是在这里盖楼
2、as并不自带gradle，gradle是随项目走的，但高版本的as打开低版本的项目时会提示升级（只有你点了升级，gradle才会被升级，所以文档中有特别的说明）

image

3、rn目前自带的gradle在jdk8和jdk11应该都可以运行，但更早版本只能运行于jdk8，为了保证最广泛的兼容性，目前文档采取jdk8的说法（对于这种底层工具链，原则上使用最低的兼容版本），以避免给更多新手带来困惑。将来如果有升级，文档会有相应调整。但总之，结合文档、实际环境、报错提示，根据当前的实际需求做实际的调整，而不是刻舟求剑。

@ming-js
Copy link

ming-js commented Apr 21, 2022

楼主，有代理工具可以推荐一下吗？？？

@heitings
Copy link

各位大佬有没有什么成熟的框架推荐便于快速开发项目的？

@github-actions
Copy link

👋 Hey there, it looks like there has been no activity on this issue in the last 90 days. Has the issue been fixed, or does it still require the community attention? This issue will be closed in the next 7 days if no further activity occurs. Thank you for your contributions.

@github-actions github-actions bot added the Stale label Oct 20, 2022
@reactnativecn reactnativecn locked and limited conversation to collaborators Oct 20, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Stale
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests