Skip to content

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

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

Description

@sunnylqm
sunnylqm
opened on Mar 13, 2020

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

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

工具链中任意一处对特殊字符处理不好就会导致莫名其妙且难以察觉的错误。不要挖这样的坑。请不要使用和核心模块同名的目录名（如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

这样代码就会自动排版且带有语法高亮

Activity

  1. sunnylqm
    pinned this issue on Mar 13, 2020

  2. linzhiju007 commented on Apr 20, 2020

    @linzhiju007
    linzhiju007
    on Apr 20, 2020

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

  3. sunnylqm commented on Apr 26, 2020

    @sunnylqm
    sunnylqm
    on Apr 26, 2020
    Author

    @linzhiju007

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

  4. linzhiju007 commented on Apr 26, 2020

    @linzhiju007
    linzhiju007
    on Apr 26, 2020 via email

  5. sunnylqm commented on Apr 27, 2020

    @sunnylqm
    sunnylqm
    on Apr 27, 2020
    Author

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

  6. linzhiju007 commented on Apr 28, 2020

    @linzhiju007
    linzhiju007
    on Apr 28, 2020 via email

  7. sunmze commented on May 18, 2020

    @sunmze
    sunmze
    on May 18, 2020 via email

  8. HelloWilliam commented on May 29, 2020

    @HelloWilliam
    HelloWilliam
    on May 29, 2020

    第一次安装项目，在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)

  9. sunnylqm commented on May 30, 2020

    @sunnylqm
    sunnylqm
    on May 30, 2020
    Author

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

  10. LassZhang commented on Jun 22, 2020

    @LassZhang
    LassZhang
    on Jun 22, 2020

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

  11. LassZhang commented on Jun 22, 2020

    @LassZhang
    LassZhang
    on Jun 22, 2020

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

  12. LassZhang commented on Jun 22, 2020

    @LassZhang
    LassZhang
    on Jun 22, 2020

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

  13. zhuhongyang commented on Jul 29, 2020

    @zhuhongyang
    zhuhongyang
    on Jul 29, 2020

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

  14. wu1210787810 commented on Aug 18, 2020

    @wu1210787810
    wu1210787810
    on Aug 18, 2020

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

  15. daidaic commented on Sep 3, 2020

    @daidaic
    daidaic
    on 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)

  16. 8 remaining items

  17. sunnylqm commented on Jul 16, 2021

    @sunnylqm
    sunnylqm
    on Jul 16, 2021
    Author

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

  18. yangyanqin11 commented on Aug 2, 2021

    @yangyanqin11
    yangyanqin11
    on Aug 2, 2021

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

  19. sunwen0402 commented on Sep 16, 2021

    @sunwen0402
    sunwen0402
    on Sep 16, 2021

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

  20. sunmze commented on Sep 16, 2021

    @sunmze
    sunmze
    on Sep 16, 2021

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

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

  21. sunwen0402 commented on Sep 16, 2021

    @sunwen0402
    sunwen0402
    on Sep 16, 2021

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

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

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

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

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

  22. SanpLee commented on Dec 7, 2021

    @SanpLee
    SanpLee
    on Dec 7, 2021

    有没有指教怎么卡在 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

  23. dongfangmeng commented on Jan 12, 2022

    @dongfangmeng
    dongfangmeng
    on Jan 12, 2022

    请问以下，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

  24. sunnylqm commented on Jan 12, 2022

    @sunnylqm
    sunnylqm
    on Jan 12, 2022 via email
    Author

  25. dongfangmeng commented on Jan 12, 2022

    @dongfangmeng
    dongfangmeng
    on Jan 12, 2022 via email

  26. sunnylqm commented on Jan 12, 2022

    @sunnylqm
    sunnylqm
    on Jan 12, 2022
    Author

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

    image

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

  27. ming-js commented on Apr 21, 2022

    @ming-js
    ming-js
    on Apr 21, 2022

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

  28. heitings commented on Jul 21, 2022

    @heitings
    heitings
    on Jul 21, 2022

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

  29. github-actions commented on Oct 20, 2022

    @github-actions
    github-actionsbot
    on Oct 20, 2022

    👋 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.

  30. github-actions
    added
    Stale
    on Oct 20, 2022
  31. reactnativecn
    locked and limited conversation to collaborators on Oct 20, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Stale

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions