前言：
從今天起開啟一門全新的課程學習，就是React Native，遠在18年https://www.cnblogs.com/webor2006/p/9350428.html其實當時就已經做過開篇，然而很遺憾，這塊的學習徹底給放棄了，造成三四年過去了，此技能依然完全不懂。。那為啥又突然要揀起它呢？原因是最近在學習這個系列課程時【我的博客】：
既將要學習到在Android項目中混編RN，這門課程的學習是花了大的心血的，為了繼續學好它當然不能馬虎，所欠缺的知識點該補的就得補，容不得半點偷懶，另外對我來說通過學習一門優質課程，然后課程中發現自己所缺失的再進行技能專項練習，是一個非常舒服的學習過程，因為是帶着目標的，學習起來的動力也會比較充足，所以接下來准備從0開始攻克RN，作為2021年的一個新目標中的一員，希望到了明年Flutter+RN自己會覺得非常之親切，加油！！！
在之前的第一篇其實已經完整的介紹了如何搭建RN的環境了，當時也成功的運行起來了，那干嘛這里又從開發環境學起呢？回到當時的項目工程，可以試着再運行一下便知：
所以知道原因了吧，當時RN的版本用的是：
而官方的最新版本已經到了：
畢竟是橫跨了3年多的時間了，所以這里以一個全新的起點，從0起步，以官方最新的方式再來對RN的環境進行一個完整的配置【由於我電腦是mac，只考慮這個平台的搭建】，為后續的學習打下堅實的基礎。
開發工具的選擇：
- WebStorm/Nuclide/Vs Code/Subline。
由於RN的開發語言是js，其實是跟前端相關的一個技術棧，開發工具的話有如上這些可供選擇，不過這里會使用大名鼎鼎Jetbrains的WebStorm，用過的都知道。 - Android Studio。
這個對於我來說最熟悉不過了，開發Android的標配，構建RN的Android工程需要它。 - XCode。
既然是跨平台的技術，當然與Android對立的就是IOS的嘍，開發IOS的標題，構建RN的IOS工程需要它。 - Node.js/NPM。
作為RN的基礎，Node.js是必備的，目前本機安裝的版本為：
而最新官網的版本為：
沒關系，目前先用稍老的版本，如果在學習過程中發現需要升級，到時再來升也不遲，先盡快感受RN的魅力是重點。
搭建開發環境：
接下來則正式進入開發環境的搭建，依照官網的介紹，其實是有兩種安裝方式的：
下面分別來看一下。
Expo CLI QuikStart：
概述：
這種形式的構建場景就是當工程中只有js代碼時，而不像之前學習時看到還有android和ios native的代碼：
此時就可以用這種方式來進行環境搭建。
安裝Expo：
首先需要先來安裝Expo工具，先來看一下Expo是啥？
然后點擊“Get Started”，發現網頁打不開。。
呃，咋整，度娘，https://blog.csdn.net/zhaoxiaoruiR/article/details/82459788，發現需要給咱們的網絡添加兩個dns：
而博主所說：8.8.8.8是一個IP地址，是Google提供的免費DNS服務器的IP地址，Google提供的另外一個免費DNS服務器的IP地址是：8.8.4.4 。用戶可以使用Google提供的DNS服務器上網。配置好之后再運行果然就ok了，不過這里點擊它：
哇，好神奇，還需要先安裝到個app到手機上，先不管這么多，按照官方流程走一遍，點擊它進行apk的下載：
安裝打開之后app長這樣：
其中看到有一個要掃描二維碼的按鈕，這塊在之后會用到的。
升級node.js：
由於官網已經明確提示需要使用node這個版本以上：
而本機目前是:
所以咱們選一個12最大的一個版本升級一下：
安裝完之后，確保版本號輸出的是它：
npm install -g expo-cli：
接下來則需要使用nmp來安裝expo的客戶端，腳手架工具，如下：
此安裝需要稍等一會，安裝結束之后如下：
安裝成功的效果就是可以使用expo這個命令了，查看一下它的版本號：
expo init AwesomeProject：
接下來就可以使用expo命令來創建項目了，如下：
可以用上下方向鍵進行相關選擇，其實就是選擇創建項目的模板工程，選好之后直接回車，則就開始安裝了：
過一會安裝結束之后則會顯示：
此時本地就有這個項目文件了：
start a development server：
接下來進入到創建的工程中執行npm start：
其完整的日志如下：
(base) xiongweideMBP:reactnativestudy xiongwei$ cd AwesomeProject/
(base) xiongweideMBP:AwesomeProject xiongwei$ npm start
> @ start /Users/xiongwei/Documents/workspace/reactnativestudy/AwesomeProject > expo start Starting project at /Users/xiongwei/Documents/workspace/reactnativestudy/AwesomeProject Developer tools running on http://localhost:19002 Opening developer tools in the browser... Starting Metro Bundler 此處是一個上圖的二維碼圖，略過。。 › Waiting on exp://192.168.0.100:19000 › Scan the QR code above with Expo Go (Android) or the Camera app (iOS) › Press a │ open Android › Press i │ open iOS simulator › Press w │ open web › Press d │ open developer tools › shift+d │ toggle auto opening developer tools on startup (enabled) › Press ? │ show all commands Logs for your project will appear below. Press Ctrl+C to exit. Error: EMFILE: too many open files, watch at FSEvent.FSWatcher._handle.onchange (internal/fs/watchers.js:168:28) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! @ start: `expo start` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the @ start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /Users/xiongwei/.npm/_logs/2021-03-14T22_09_53_337Z-debug.log
報錯了。。然后此時會自動跳到一個網頁：
此時提示需要用“expo start”嘗試一下，那試一下吧：
(base) xiongweideMBP:AwesomeProject xiongwei$ expo start
Starting project at /Users/xiongwei/Documents/workspace/reactnativestudy/AwesomeProject Developer tools running on http://localhost:19002 Opening developer tools in the browser... Starting Metro Bundler 此處是二維碼。。 › Waiting on exp://192.168.0.100:19000 › Scan the QR code above with Expo Go (Android) or the Camera app (iOS) › Press a │ open Android › Press i │ open iOS simulator › Press w │ open web › Press d │ open developer tools › shift+d │ toggle auto opening developer tools on startup (enabled) › Press ? │ show all commands Logs for your project will appear below. Press Ctrl+C to exit. Error: EMFILE: too many open files, watch at FSEvent.FSWatcher._handle.onchange (internal/fs/watchers.js:168:28)
還是報錯。。此時用expo在Android機上的app掃一下二維碼，看到的也是報錯：
此時帶着“Error: EMFILE: too many open files, watch”這個錯誤關鍵詞上expo的官方論壇去搜一下解決方案：
在這搜到了解決方法：https://forums.expo.io/t/error-emfile-too-many-open-files/35564，
哦，需要重新安裝一下watchman這個工具喲，試一下唄：
再來“expo start”，發現確實是木有報錯了，此時用手機的expo app掃碼網頁中的二維碼，就可以正常的預覽reactive native工程了：
此時就可以看到創建的DEMO工程了：
工程結構簡覽：
接下來用WebStorm打開工程，瞅一下大概的工程結構：
另外還有兩個配置文件：
React Native CLI QuikStart：
接下來看第二種安裝方式：
很顯然這種方式是最為常見的，混編嘛，下面具體來看一下：
Node & Watchman：
這倆其實已經安裝好了，其中說一下Watchman是干嘛的呢？https://github.com/facebook/watchman，瞅一下：
也就是進行文件變化監聽用的，目前安裝的版本為：
具體平台搭建：
接下來則從Android和IOS兩個角度分別進行搭建：
Android環境：
1、JDK安裝，這塊就不多說了。
2、Android Sutdio安裝，並配置好相關Android環境 ，具體網上一大堆，略過。
3、 Creating a new application：
需要等待一會，然后最后創建完則會顯示它：
4、Running your React Native application：
-
Step 1: Start Metro:
看到上面這個提示就代表成功啟動。
-
Step 2: Start your application:
這里直接用真機來運行，然后執行一下上面的命令，看能否正常的運行到Adnroid手機上：
但是！！！最后報錯了。。
* What went wrong: Execution failed for task ':app:installDebug'. > java.util.concurrent.ExecutionException: com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: Unknown failure: Security exception: You need the android.permission.INSTALL_GRANT_RUNTIME_PERMISSIONS permission to use the PackageManager.INSTALL_GRANT_RUNTIME_PERMISSIONS flag java.lang.SecurityException: You need the android.permission.INSTALL_GRANT_RUNTIME_PERMISSIONS permission to use the PackageManager.INSTALL_GRANT_RUNTIME_PERMISSIONS flag at com.android.server.pm.PackageInstallerService.createSessionInternal(PackageInstallerService.java:459) at com.android.server.pm.PackageInstallerService.createSession(PackageInstallerService.java:417) at com.android.server.pm.PackageManagerShellCommand.doCreateSession(PackageManagerShellCommand.java:2418) at com.android.server.pm.PackageManagerShellCommand.runInstall(PackageManagerShellCommand.java:907) at com.android.server.pm.PackageManagerShellCommand.onCommand(PackageManagerShellCommand.java:158) at android.os.ShellCommand.exec(ShellCommand.java:103) at com.android.server.pm.PackageManagerService.onShellCommand(PackageManagerService.java:21933) at android.os.Binder.shellCommand(Binder.java:634) at android.os.Binder.onTransact(Binder.java:532) at android.content.pm.IPackageManager$Stub.onTransact(IPackageManager.java:2809) at com.android.server.pm.PackageManagerService.onTransact(PackageManagerService.java:4023) at android.os.Binder.execTransact(Binder.java:735) * Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights. * Get more help at https://help.gradle.org BUILD FAILED in 35s at makeError (/Users/xiongwei/Documents/workspace/reactnativestudy/my_app/node_modules/execa/index.js:174:9) at /Users/xiongwei/Documents/workspace/reactnativestudy/my_app/node_modules/execa/index.js:278:16 at processTicksAndRejections (internal/process/task_queues.js:97:5) at async runOnAllDevices (/Users/xiongwei/Documents/workspace/reactnativestudy/my_app/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/runOnAllDevices.js:94:5) at async Command.handleAction (/Users/xiongwei/Documents/workspace/reactnativestudy/my_app/node_modules/react-native/node_modules/@react-native-community/cli/build/index.js:186:9) info Run CLI with --verbose flag for more details.報木有權限，這是啥原因呢？度娘一下：https://www.jianshu.com/p/0dde41a26231，原來是需要打開開發者的這個選項【我調試的設備是紅米7，MIUI11.0.7，不同的手機設置地方可能不太一樣】：
再來執行一下安裝命令：
此時手機上會出現正在構建的提示：
構建完成之后，標准的RN的DEMO頁面就出現了：
其中提示按鍵盤可以重新加載和調出開發者菜單，注意：如果是真機此時的按鍵一定要在這個命令窗口進行按鍵操作：
下面來試一下效果：
另外對於真機還有搖一搖手機的方式來調出，也就是如界面提示所示：
咱們來試一下：
由於錄屏看不到手搖的效果，這里得自行體會一下，注意要左右搖，上下搖貌似不太靈敏。
5、Modifying your app：
接下來用webstorm打開創建的工程，打算修改一下來看一下效果：
然后修改一下App.js文件，先來貼一下官方生成的代碼：
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow strict-local
*/
import React from 'react';
import type {Node} from 'react'; import { SafeAreaView, ScrollView, StatusBar, StyleSheet, Text, useColorScheme, View, } from 'react-native'; import { Colors, DebugInstructions, Header, LearnMoreLinks, ReloadInstructions, } from 'react-native/Libraries/NewAppScreen'; const Section = ({children, title}): Node => { const isDarkMode = useColorScheme() === 'dark'; return ( <View style={styles.sectionContainer}> <Text style={[ styles.sectionTitle, { color: isDarkMode ? Colors.white : Colors.black, }, ]}> {title} </Text> <Text style={[ styles.sectionDescription, { color: isDarkMode ? Colors.light : Colors.dark, }, ]}> {children} </Text> </View> ); }; const App: () => Node = () => { const isDarkMode = useColorScheme() === 'dark'; const backgroundStyle = { backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, }; return ( <SafeAreaView style={backgroundStyle}> <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} /> <ScrollView contentInsetAdjustmentBehavior="automatic" style={backgroundStyle}> <Header /> <View style={{ backgroundColor: isDarkMode ? Colors.black : Colors.white, }}> <Section title="Step One"> Edit <Text style={styles.highlight}>App.js</Text> to change this screen and then come back to see your edits. </Section> <Section title="See Your Changes"> <ReloadInstructions /> </Section> <Section title="Debug"> <DebugInstructions /> </Section> <Section title="Learn More"> Read the docs to discover what to do next: </Section> <LearnMoreLinks /> </View> </ScrollView> </SafeAreaView> ); }; const styles = StyleSheet.create({ sectionContainer: { marginTop: 32, paddingHorizontal: 24, }, sectionTitle: { fontSize: 24, fontWeight: '600', }, sectionDescription: { marginTop: 8, fontSize: 18, fontWeight: '400', }, highlight: { fontWeight: '700', }, }); export default App;
這里簡單修改一下：
好，看一下它的熱重載效果，還是回到metro終端，按r鍵，發現有時候會出現這個情況：
明明我改了代碼呀，此時我們用搖一搖調出開發者菜單的reload試一下，發現直接報錯了：
遇到這種情況，不要慌，重新用“npx react-native run-android”強制運行一次，然后再來到metro終端執行一下既可，而其實編輯代碼就可以自動刷新了，都不用到metro窗口控r鍵，看一下：
每次修改代碼之后，按"ctrl+s"就自動刷新了，不管怎樣，可能熱重載會有不生效的情況，當遇到時直接用“npx react-native run-android”重新編譯運行定能解決。
IOS環境：
接下來看一下IOS環境。
1、Xcode:
這塊的安裝就不多說了，直接上appstore進行安裝既可。我本機的版本如下：
2、Command Line Tools：
打開"Preferences..." ，確保安裝了它：
3、Installing an iOS Simulator in Xcode：
安裝一個ios模擬器，由於我沒有真機，這步肯定是必備的，當然如果有真機的小伙伴這一步可有可無。
4、CocoaPods：
如官網所示使用該命令進行安裝：
整個安裝過程日志如下：
(base) xiongweideMBP:reactnativestudy xiongwei$ sudo gem install cocoapods
Password:
Fetching concurrent-ruby-1.1.8.gem Fetching i18n-1.8.9.gem Fetching thread_safe-0.3.6.gem Fetching tzinfo-1.2.9.gem Fetching nap-1.1.0.gem Fetching fuzzy_match-2.0.4.gem Fetching activesupport-5.2.4.5.gem Fetching httpclient-2.8.3.gem Fetching algoliasearch-1.27.5.gem Fetching ffi-1.15.0.gem Fetching ethon-0.12.0.gem Fetching typhoeus-1.4.0.gem Fetching netrc-0.11.0.gem Fetching public_suffix-4.0.6.gem Fetching addressable-2.7.0.gem Fetching cocoapods-core-1.10.1.gem Fetching claide-1.0.3.gem Fetching cocoapods-deintegrate-1.0.4.gem Fetching cocoapods-downloader-1.4.0.gem Fetching cocoapods-plugins-1.0.0.gem Fetching cocoapods-search-1.0.0.gem Fetching cocoapods-trunk-1.5.0.gem Fetching cocoapods-try-1.2.0.gem Fetching molinillo-0.6.6.gem Fetching atomos-0.1.3.gem Fetching colored2-3.1.2.gem Fetching nanaimo-0.3.0.gem Fetching xcodeproj-1.19.0.gem Fetching escape-0.0.4.gem Fetching fourflusher-2.3.1.gem Fetching gh_inspector-1.1.3.gem Fetching ruby-macho-1.4.0.gem Fetching cocoapods-1.10.1.gem Successfully installed concurrent-ruby-1.1.8 Successfully installed i18n-1.8.9 Successfully installed thread_safe-0.3.6 Successfully installed tzinfo-1.2.9 Successfully installed activesupport-5.2.4.5 Successfully installed nap-1.1.0 Successfully installed fuzzy_match-2.0.4 Successfully installed httpclient-2.8.3 A new major version is available for Algolia! Please now use the https://rubygems.org/gems/algolia gem to get the latest features. Successfully installed algoliasearch-1.27.5 Building native extensions. This could take a while... Successfully installed ffi-1.15.0 Successfully installed ethon-0.12.0 Successfully installed typhoeus-1.4.0 Successfully installed netrc-0.11.0 Successfully installed public_suffix-4.0.6 Successfully installed addressable-2.7.0 Successfully installed cocoapods-core-1.10.1 Successfully installed claide-1.0.3 Successfully installed cocoapods-deintegrate-1.0.4 Successfully installed cocoapods-downloader-1.4.0 Successfully installed cocoapods-plugins-1.0.0 Successfully installed cocoapods-search-1.0.0 Successfully installed cocoapods-trunk-1.5.0 Successfully installed cocoapods-try-1.2.0 Successfully installed molinillo-0.6.6 Successfully installed atomos-0.1.3 Successfully installed colored2-3.1.2 Successfully installed nanaimo-0.3.0 xcodeproj's executable "xcodeproj" conflicts with /usr/local/bin/xcodeproj Overwrite the executable? [yN] ^[y xcodeproj's executable "xcodeproj" conflicts with /usr/local/bin/xcodeproj Overwrite the executable? [yN] y Successfully installed xcodeproj-1.19.0 Successfully installed escape-0.0.4 Successfully installed fourflusher-2.3.1 Successfully installed gh_inspector-1.1.3 Successfully installed ruby-macho-1.4.0 cocoapods's executable "pod" conflicts with /usr/local/bin/pod Overwrite the executable? [yN] y Successfully installed cocoapods-1.10.1 Parsing documentation for concurrent-ruby-1.1.8 Installing ri documentation for concurrent-ruby-1.1.8 Parsing documentation for i18n-1.8.9 Installing ri documentation for i18n-1.8.9 Parsing documentation for thread_safe-0.3.6 Installing ri documentation for thread_safe-0.3.6 Parsing documentation for tzinfo-1.2.9 Installing ri documentation for tzinfo-1.2.9 Parsing documentation for activesupport-5.2.4.5 Installing ri documentation for activesupport-5.2.4.5 Parsing documentation for nap-1.1.0 Installing ri documentation for nap-1.1.0 Parsing documentation for fuzzy_match-2.0.4 Installing ri documentation for fuzzy_match-2.0.4 Parsing documentation for httpclient-2.8.3 Installing ri documentation for httpclient-2.8.3 Parsing documentation for algoliasearch-1.27.5 Installing ri documentation for algoliasearch-1.27.5 Parsing documentation for ffi-1.15.0 Installing ri documentation for ffi-1.15.0 Parsing documentation for ethon-0.12.0 Installing ri documentation for ethon-0.12.0 Parsing documentation for typhoeus-1.4.0 Installing ri documentation for typhoeus-1.4.0 Parsing documentation for netrc-0.11.0 Installing ri documentation for netrc-0.11.0 Parsing documentation for public_suffix-4.0.6 Installing ri documentation for public_suffix-4.0.6 Parsing documentation for addressable-2.7.0 Installing ri documentation for addressable-2.7.0 Parsing documentation for cocoapods-core-1.10.1 Installing ri documentation for cocoapods-core-1.10.1 Parsing documentation for claide-1.0.3 Installing ri documentation for claide-1.0.3 Parsing documentation for cocoapods-deintegrate-1.0.4 Installing ri documentation for cocoapods-deintegrate-1.0.4 Parsing documentation for cocoapods-downloader-1.4.0 Installing ri documentation for cocoapods-downloader-1.4.0 Parsing documentation for cocoapods-plugins-1.0.0 Installing ri documentation for cocoapods-plugins-1.0.0 Parsing documentation for cocoapods-search-1.0.0 Installing ri documentation for cocoapods-search-1.0.0 Parsing documentation for cocoapods-trunk-1.5.0 Installing ri documentation for cocoapods-trunk-1.5.0 Parsing documentation for cocoapods-try-1.2.0 Installing ri documentation for cocoapods-try-1.2.0 Parsing documentation for molinillo-0.6.6 Installing ri documentation for molinillo-0.6.6 Parsing documentation for atomos-0.1.3 Installing ri documentation for atomos-0.1.3 Parsing documentation for colored2-3.1.2 Installing ri documentation for colored2-3.1.2 Parsing documentation for nanaimo-0.3.0 Installing ri documentation for nanaimo-0.3.0 Parsing documentation for xcodeproj-1.19.0 Installing ri documentation for xcodeproj-1.19.0 Parsing documentation for escape-0.0.4 Installing ri documentation for escape-0.0.4 Parsing documentation for fourflusher-2.3.1 Installing ri documentation for fourflusher-2.3.1 Parsing documentation for gh_inspector-1.1.3 Installing ri documentation for gh_inspector-1.1.3 Parsing documentation for ruby-macho-1.4.0 Installing ri documentation for ruby-macho-1.4.0 Parsing documentation for cocoapods-1.10.1 Installing ri documentation for cocoapods-1.10.1 Done installing documentation for concurrent-ruby, i18n, thread_safe, tzinfo, activesupport, nap, fuzzy_match, httpclient, algoliasearch, ffi, ethon, typhoeus, netrc, public_suffix, addressable, cocoapods-core, claide, cocoapods-deintegrate, cocoapods-downloader, cocoapods-plugins, cocoapods-search, cocoapods-trunk, cocoapods-try, molinillo, atomos, colored2, nanaimo, xcodeproj, escape, fourflusher, gh_inspector, ruby-macho, cocoapods after 72 seconds 33 gems installed
5、Creating a new application:
tips：這一步如果已經創建過了可以省略，在上面android環境中已經創建了一個項目了，為啥在ios中又拎出來呢，因為有一些異常情況在上面忘了說明了，這里再創建一次，真實對於一個RN項目只需要創建一次既可，這一點一定要注意哦~~
如官網所示：
執行一下命令：
稍等片刻之后，安裝最后發現有一些小問題：
好吧，按提示來修復一下：
呃，先不管這么多吧，其實項目是已經創建成功了：
這里直接嘗試運行到ios試一下效果。
6、Running your React Native application：
- Step 1: Start Metro：
這一步驟跟上面Android環境搭建的一樣，目前已經啟動了：
- Step 2: Start your application：
看接下來整個運行的一個曲折過程，各種錯。。
然后在日志最后看到如下錯誤：
帶着這樣的關鍵字去google一下，搜到這么一個貼子：https://github.com/react-native-community/cli/issues/1311，
哦，到ios目錄中運行一下"pob install"，試一下：
用網頁訪問一下，貌似確實是連不上：
關於github上不去看了此貼https://blog.csdn.net/Hodors/article/details/103226958之后，發現取消一下全局代理貌似就可以了：
取消全局代理： git config --global --unset http.proxy git config --global --unset https.proxy
但是！！！還是不行，最后在貼子這個評論上看到了這句話才意識到，就是需要設置代理才行：
我的梯子用的是它：
然后對應的代理端口為【具體的代理端口得依賴於本機代理軟件】：
git config --global http.proxy http://127.0.0.1:58591 git config --global https.proxy http://127.0.0.1:58591
然后再來進行安裝，不要太順：
(base) xiongweideMBP:ios xiongwei$ git config --global http.proxy http://127.0.0.1:58591 (base) xiongweideMBP:ios xiongwei$ git config --global https.proxy http://127.0.0.1:58591 (base) xiongweideMBP:ios xiongwei$ pod install Auto-linking React Native module for target `my_app`: react-native-document-picker 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 `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.64.0) Installing FBReactNativeSpec (0.64.0) Installing Flipper (0.75.1) Installing Flipper-DoubleConversion (1.1.7) Installing Flipper-Folly (2.5.1) Installing Flipper-Glog (0.3.6) Installing Flipper-PeerTalk (0.0.4) Installing Flipper-RSocket (1.3.0) Installing FlipperKit (0.75.1) Installing OpenSSL-Universal (1.1.180) Installing RCT-Folly (2020.01.13.00) Installing RCTRequired (0.64.0) Installing RCTTypeSafety (0.64.0) Installing React (0.64.0) Installing React-Core (0.64.0) Installing React-CoreModules (0.64.0) Installing React-RCTActionSheet (0.64.0) Installing React-RCTAnimation (0.64.0) Installing React-RCTBlob (0.64.0) Installing React-RCTImage (0.64.0) Installing React-RCTLinking (0.64.0) Installing React-RCTNetwork (0.64.0) Installing React-RCTSettings (0.64.0) Installing React-RCTText (0.64.0) Installing React-RCTVibration (0.64.0) Installing React-callinvoker (0.64.0) Installing React-cxxreact (0.64.0) Installing React-jsi (0.64.0) Installing React-jsiexecutor (0.64.0) Installing React-jsinspector (0.64.0) Installing React-perflogger (0.64.0) Installing React-runtimeexecutor (0.64.0) Installing ReactCommon (0.64.0) Installing Yoga (1.14.0) Installing YogaKit (1.18.1) Installing boost-for-react-native (1.63.0) Installing glog (0.3.5) Installing libevent (2.1.12) Installing react-native-document-picker (5.0.1) Generating Pods project Integrating client project [!] Please close any current Xcode sessions and use `my_app.xcworkspace` for this project from now on. Pod installation complete! There are 50 dependencies from the Podfile and 41 total pods installed. [!] FBReactNativeSpec has added 1 script phase. Please inspect before executing a build. See `https://guides.cocoapods.org/syntax/podspec.html#script_phases` for more information.
其中最后提示需要關閉一下xcode，然后此時咱們再來rn運行看一下：
然后google了這么一個貼子：https://developer.apple.com/forums/thread/656509，然后發現個大佬說了這句話：
很遺憾，還是報錯。。而且經過2天的各種網上的搜尋在我的機子上並未解決，編譯解決了，但是就是無法在模擬器安裝，總是報如下錯：(base) xiongweideMacBook-Pro:my_app xiongwei$ npx react-native run-ios info Found Xcode workspace "my_app.xcworkspace" info Building (using "xcodebuild -workspace my_app.xcworkspace -configuration Debug -scheme my_app -destination id=4B986B00-DB5C-4BC2-88E8-9208EECCE46D") success Successfully built the app//這里編譯成功了 info Installing "/Users/xiongwei/Library/Developer/Xcode/DerivedData/my_app-demfxoevpcgjzffobcmwsnnltnvh/Build/Products/Debug-iphonesimulator/my_app.app" An error was encountered processing the command (domain=IXUserPresentableErrorDomain, code=1): This app could not be installed at this time. Could not install at this time. Failed to chmod /Users/xiongwei/Library/Developer/CoreSimulator/Devices/4B986B00-DB5C-4BC2-88E8-9208EECCE46D/data/Bundle/Application/D643368A-9DED-46A0-A933-EF30ADF5EFD5/my_app.app/my_app : No such file or directory Underlying error (domain=MIInstallerErrorDomain, code=4): Failed to chmod /Users/xiongwei/Library/Developer/CoreSimulator/Devices/4B986B00-DB5C-4BC2-88E8-9208EECCE46D/data/Bundle/Application/D643368A-9DED-46A0-A933-EF30ADF5EFD5/my_app.app/my_app : No such file or directory info Launching "org.reactjs.native.example.my-app" error Failed to launch the app on simulator, An error was encountered processing the command (domain=FBSOpenApplicationServiceErrorDomain, code=1): The request to open "org.reactjs.native.example.my-app" failed. The request was denied by service delegate (SBMainWorkspace) for reason: NotFound ("Application "org.reactjs.native.example.my-app" is unknown to FrontBoard"). Underlying error (domain=FBSOpenApplicationErrorDomain, code=4): The operation couldn’t be completed. Application "org.reactjs.native.example.my-app" is unknown to FrontBoard. Application "org.reactjs.native.example.my-app" is unknown to FrontBoard.//運行總是報錯
然后帶着這樣的錯誤在StackOverFlow上看到這么一個提示https://stackoverflow.com/questions/57510972/unable-to-install-reactnative-app-on-ios-simulator：
而且還有一個貼子https://stackoverflow.com/questions/59856755/ios-react-native-app-build-succeeded-but-app-not-getting-open-in-ios-device-si說需要將xCode進行升級，升到12以上版本。。
由於xCode12有11.6g的大小。。目前我的版本為：
升級Xcoder的方案不太想采納，於是乎決定采用RN的降級策略，而實際工作中對於軟件版本的選擇也並不是越新越好，而對於學習來說，弄個次新版本完全不影響學習，所以接下來就是選擇哪個次新版本的問題了，經過本地多次嘗試，最后發現降為它就可以了【注意：每個人機器的環境不一樣，可能適用的版本也會有差別，當遇到運行不了的，可以采用類似的降級策略進行嘗試】：
那如何在創建工程時指定版本呢？官網有說明：
所以將之前創建的RN工程給刪除掉，重新使用指定版本來創建：
創建成功則可以進行運行了：
此過程需要耐心等待一下，最終就運行成功了，跟上面Android的效果一樣：
其中會自動打開metro窗口的：
由於是模擬器，所以此時不用像上面運行真機Android那樣對於熱重載需要對着metro終端來進行按鍵，這里直接對模擬器上進行“cmd+r”和“cmd+d”既可：
那選的這個版本在android運行上也正常么，測一下：(base) xiongweideMacBook-Pro:my_app xiongwei$ react-native run-android info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag. Jetifier found 960 file(s) to forward-jetify. Using 4 workers... info JS server already running. info Installing the app... Downloading https://services.gradle.org/distributions/gradle-6.0.1-all.zip ...................................................................................................................................... Welcome to Gradle 6.0.1! Here are the highlights of this release: - Substantial improvements in dependency management, including - Publishing Gradle Module Metadata in addition to pom.xml - Advanced control of transitive versions - Support for optional features and dependencies - Rules to tweak published metadata - Support for Java 13 - Faster incremental Java and Groovy compilation - New Zinc compiler for Scala - VS2019 support - Support for Gradle Enterprise plugin 3.0 For more details see https://docs.gradle.org/6.0.1/release-notes.html Starting a Gradle Daemon (subsequent builds will be faster) > Task :app:compileDebugJavaWithJavac > Task :app:installDebug 06:04:36 V/ddms: execute: running am get-config 06:04:36 V/ddms: execute 'am get-config' on '4ee36565' : EOF hit. Read: -1 06:04:36 V/ddms: execute: returning Installing APK 'app-debug.apk' on 'Redmi Note 7 - 9' for app:debug 06:04:36 D/app-debug.apk: Uploading app-debug.apk onto device '4ee36565' 06:04:36 D/Device: Uploading file onto device '4ee36565' 06:04:36 D/ddms: Reading file permision of /Users/xiongwei/Documents/workspace/reactnativestudy/my_app/android/app/build/outputs/apk/debug/app-debug.apk as: rw-r--r-- 06:04:37 V/ddms: execute: running pm install -r -t "/data/local/tmp/app-debug.apk" 06:04:41 V/ddms: execute 'pm install -r -t "/data/local/tmp/app-debug.apk"' on '4ee36565' : EOF hit. Read: -1 06:04:41 V/ddms: execute: returning 06:04:41 V/ddms: execute: running rm "/data/local/tmp/app-debug.apk" 06:04:41 V/ddms: execute 'rm "/data/local/tmp/app-debug.apk"' on '4ee36565' : EOF hit. Read: -1 06:04:41 V/ddms: execute: returning Installed on 1 device. Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0. Use '--warning-mode all' to show the individual deprecation warnings. See https://docs.gradle.org/6.0.1/userguide/command_line_interface.html#sec:command_line_warnings BUILD SUCCESSFUL in 2m 25s 27 actionable tasks: 27 executed info Connecting to the development server... info Starting the app on "4ee36565"... Starting: Intent { cmp=com.my_app/.MainActivity }
妥妥的，所以在接下來的RN學習中，版本就由目前最新的0.64改為次新的0.62.2。
7、Modifying your app：
最后再來修改一下代碼來看一下在ios實時變更的效果：
總結：
這次學習就是純環境搭建了，本以為很輕松愉悅的【android平台確實是很輕松，基本沒遇到啥問題】，木有想到在ios上栽了好多跟頭，最后不得以降為次新版本來解決ios平台的問題，當然可能還有其它辦法能完全解決最新版本在ios運行不了的問題，但！！！我放棄了，因為折騰幾天了，時間上不值，而且對於一門全新的技術學習得盡快往下進行，不然挫敗感太強導致都沒有信心繼續往下前行了，環境已經搞好，下次則正式進入RN的基礎篇嘍~~