概述
搭建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 可以正常使用。