React Native允許您使用JavaScript和React爲iOS和Android開發原生移動應用程序。它是由Facebook創建的，用於Instagram，Airbnb和現在的JetBrains自己的 YouTrack移動應用程序（順便說一下，它是開源的）等知名應用程序。
使用WebStorm，您現在可以使用React Native開發移動應用程序，從而獲得WebStorm好處的所有好處，例如React，Flow支持和內置調試器的代碼完成。我們相信WebStorm可以成爲使用React Native進行開發的強大工具！
讓我們看看如何使用WebStorm中的React Native建立開發工作流程。
安裝React Native CLI
確保您的計算機上安裝了React Native CLI。要安裝它，請在終端中運行以下命令：npm install -g react-native-cli。
您開始使用React Native時需要安裝的工具列表取決於您的操作系統以及您要定位應用程序的移動平臺。有關詳細的安裝說明，請查看React Native的入門指南。
創建一個新項目
現在，您可以直接從IDE歡迎屏幕創建一個新的React Native項目：單擊Create new project，從左側列表中選擇React Native，輸入項目名稱並單擊OK。
WebStorm將運行項目生成器並安裝所有必需的依賴項。
當然，您也可以打開現有項目或從版本控制中選擇一個。
我們建議您從項目中排除android和ios文件夾。爲此，右鍵單擊“項目”視圖中的文件夾，然後選擇“ 標記爲已排除”。
運行和調試應用程序
現在我們在IDE中有我們的應用程序代碼，讓我們運行它。
UPD： 在WebStorm 2018.1中，我們 重新設計了React Native配置。它現在爲您提供了更靈活的運行捆綁程序和構建應用程序本身。在下面的步驟中，我們使用WebStorm版本2018.2。
我們需要創建一個新的React Native運行/調試配置。在“Run”菜單中，選擇“ Edit configurations…”，單擊“ +”按鈕，然後從列表中選擇“ React Native ”。
要首次啓動React Native應用程序，您需要做兩件事：運行React Native bundler / packager，然後使用react-native run-ios或在模擬器或設備上構建和啓動應用程序run-android command。只有在那之後，您纔可以開始調試它。
選中 Build and Launch Application選項後，WebStorm將爲您完成所有這些操作 - 您只需選擇目標平臺iOS或Android，確保React Native CLI軟件包的路徑正確並單擊Ok。
如果您要在Android上運行您的應用，請不要忘記先啓動Android虛擬設備 。您還可以在通過USB連接的真實Android設備上運行您的應用程序 （爲此，請不要忘記 啓用USB調試）。
現在讓我們運行創建的配置 - 單擊IDE工具欄中配置名稱旁邊的綠色調試圖標。WebStorm將首先在新的React Native工具窗口中啓動React Native打包程序，然後運行react-native run-ios或react-native run-android命令，具體取決於所選的目標平臺。
如果構建成功，您將在模擬器中看到您的應用。
模擬器第一次打開後，轉到應用內開發人員菜單並選擇Remote JS Debugging。
然後，WebStorm的內置調試器將連接到模擬器，您將能夠獲得放在源代碼中的斷點。
在調試器中，您可以單步執行代碼，設置監視，並瀏覽調用堆棧和變量值。
如果這不是你第一次運行你的應用程序並且自上次構建以來你沒有對本機代碼進行任何更改，那麼你真的不需要重建應用程序 - 你可以只運行bundler，在模擬器中打開應用程序然後調試它。
在這種情況下，創建一個新配置（或修改您已創建的配置）並取消選中其中的 Build and Launch Application複選框。調試此配置時，WebStorm將運行React Native bundler並等待您在應用程序中啓用遠程調試的情況下在模擬器中打開應用程序。
現在，運行React Native捆綁器的靈活性也更高。它現在在React Native配置中列爲Before Launch任務。默認情況下，它將運行 react-native start。您還可以從項目的package.json中選擇將啓動bundler的npm任務。
或者，如果您已經運行了捆綁包，則只需從配置中刪除此步驟（因爲您不需要爲每個應用程序運行多個捆綁器）。
如果您在應用中使用Expo，請參閱此博客文章瞭解相關步驟。
編碼協助
您可能知道，WebStorm支持React和JSX，在構建React Native應用程序時肯定會有所幫助。這包括：React組件的屬性，事件和所需屬性的代碼完成; 導航到自定義組件的定義和完成; 組件名稱的重構; 還有更多。查看我們的博客文章，在WebStorm中使用React：編碼幫助。
WebStorm 2016.3還爲React Native StyleSheet屬性添加了代碼完成：
如果您在項目中使用Flow，WebStorm可以在編輯器中突出顯示Flow中的錯誤。在Preferences |中將Flow作爲JavaScript版本啓用 語言和框架| JavaScript並指定Flow可執行文件的路徑。在此博客文章中瞭解有關使用Flow的更多信息。