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 可以正常使用。