reactnative 环境搭建填坑(红屏,)

概述

搭建reactnative window环境,并没有无脑成功记录下。操作步骤:
https://reactnative.cn/docs/getting-started/

缺陷

1、问题:‘react-native’ 不是内部或外部命令,也不是可运行的程序

操作步骤下来会漏掉一步 react-native-cli 的安装。 补上安装步骤:https://blog.csdn.net/niuba123456/article/details/81879747

2、问题:unable to load script. Make sure you…

很多人都会遇到红屏幕的问题。百度 谷歌,找到的答案都偏老。基本都是说缺文件让我们去执行命令补文件。比如:https://stackoverflow.com/questions/55441230/unable-to-load-script-make-sure-you-are-either-running-a-metro-server-or-that-yo

These steps really help me:

Step 1: Create a directory in android/app/src/main/assets

Linux command: mkdir android/app/src/main/assets

Step 2: Rename index.android.js (in root directory) to index.js (Maybe there is an index.js file in which case you do not need to rename it) then run the following command:

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

Step 3: Build your APK: react-native run-android
3、问题:执行step2的时候会报
error Invalid regular expression: /(.*\\__fixtures__\\.*|node_modules[\\\]react[\\\]dist[\\\].*|website\\node_modules\\.*|heapCapture\\bundle\.js|.*\\__tests__\\.*)$/: Unterminated character class. Run CLI with --verbose flag for more details.
SyntaxError: Invalid regular expression: /(.*\\__fixtures__\\.*|node_modules[\\\]react[\\\]dist[\\\].*|website\\node_modules\\.*|heapCapture\\bundle\.js|.*\\__tests__\\.*)$/: Unterminated character class
    at new RegExp (<anonymous>)

原因:是nodejs 的版本太高了,一开始用的是最新版本的13.x 退回去12.14也不行

4、(2,3)的正确解决方式

缺文件是历史问题,新版本的react-native 已经不会缺了。 因为nodejs 版本太高,导致红屏。原因是 server 没有启动起来。可以用命令测试:

react-native start

报错:
error Invalid regular expression: /(.*\\__fixtures__\\.*|node_modules[\\\]react[\\\]dist[\\\].*|website\\node_modules\\.*|heapCapture\\bundle\.js|.*\\__tests__\\.*)$/: Unterminated character class. Run CLI with --verbose flag for more details.
SyntaxError: Invalid regular expression: /(.*\\__fixtures__\\.*|node_modules[\\\]react[\\\]dist[\\\].*|website\\node_modules\\.*|heapCapture\\bundle\.js|.*\\__tests__\\.*)$/: Unterminated character class
    at new RegExp (<anonymous>)
    at blacklist (D:\work\vv_official\test\LearRn\node_modules\metro-config\src\defaults\blacklist.js:34:10)
    at getBlacklistRE (D:\work\vv_official\test\LearRn\node_modules\@react-native-community\cli\build\tools\loadMetroConfig.js:66:59)
    at getDefaultConfig (D:\work\vv_official\test\LearRn\node_modules\@react-native-community\cli\build\tools\loadMetroConfig.js:82:20)
    at load (D:\work\vv_official\test\LearRn\node_modules\@react-native-community\cli\build\tools\loadMetroConfig.js:118:25)
    at Object.runServer [as func] (D:\work\vv_official\test\LearRn\node_modules\@react-native-community\cli\build\commands\server\runServer.js:82:58)
    at Command.handleAction (D:\work\vv_official\test\LearRn\node_modules\@react-native-community\cli\build\index.js:164:23)
    at Command.listener (D:\work\vv_official\test\LearRn\node_modules\commander\index.js:315:8)
    at Command.emit (events.js:305:20)
    at Command.parseArgs (D:\work\vv_official\test\LearRn\node_modules\commander\index.js:651:12)

回退modejs 的版本到:10.16.3 就可以了。下载地址:https://nodejs.org/ca/blog/release/v10.16.3/ (提示:控制面板卸载再安装就可以),输入:react-native start

这个界面就是服务成功起来了
yarn react-native run-android

结论

nodejs 的版本太高会红屏, 回退成10.16.3 可以正常使用。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章