使用react-native-router-flux路由的踩坑日記，問題點： 就是不報錯，啟動項目模擬器直接白屏閃退

這個坑搞了我2天時間，問題點： 就是不報錯，啟動項目模擬器直接白屏閃退，接下來給你們看看這個坑

1.react-native-router-flux 是一個基於 react-navigation 路由框架，進一步簡化了頁面跳轉的步驟，並且一直隨着 react-navigation升級更新版本。而且使用這個框架的話，可以將全部的頁面跳轉的處理邏輯都寫在一個地方，方便了后續的維護。

如何導入 react-native-router-flux 這個可以看官網

2. 

 

 

 3. 以上是官網安裝方式，我安裝官網方式執行了 yarn add react-native-router-flux進行安裝

 4. 然后出現了如下問題

白屏后直接閃退

  

 

 

5. 揭曉問題答案為啥導致的 ，讓我們見證答案（其實就是自己沒太在意安裝路由時候的有一條連接）

 

 

 

6. 來看看我們點開那個連接官網告訴我們得信息

   

安裝

在您的React Native項目中安裝所需的軟件包：

npm install @react-navigation/native

React Navigation由一些核心實用程序組成，然后導航者使用它們在您的應用程序中創建導航結構。現在不必為此擔心太多，它很快就會變得清楚起來！為了提前完成安裝工作，我們還要安裝和配置大多數導航器使用的依賴項，然后我們就可以開始編寫一些代碼了。

我們現在將安裝這些庫react-native-gesture-handler，react-native-reanimated，react-native-screens和react-native-safe-area-context。如果您已經安裝了這些庫，並且已安裝了最新版本，則在這里完成！否則，請繼續閱讀。

將依賴項安裝到Expo管理的項目中

在您的項目目錄中，運行：

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

這將安裝這些兼容庫的版本。

現在，您可以繼續“ Hello React Navigation”以開始編寫一些代碼。

 

將依賴項安裝到一個裸Re​​act Native項目中

在您的項目目錄中，運行：

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

 

注意：安裝后，您可能會收到與對等項依賴項有關的警告。它們通常是由某些軟件包中指定的版本范圍不正確引起的。只要您的應用可以構建，您就可以放心地忽略大多數警告。

從React Native 0.60及更高版本開始，鏈接是自動的。因此，您無需運行 react-native link。

如果您使用的是Mac並針對iOS開發，則需要安裝Pod才能完成鏈接。確保已安裝Cocoapods。然后運行：

cd ios; pod install; cd ..

 

要完成react-native-screens Android的安裝，請將以下兩行添加到中的dependencies部分android/app/build.gradle：

implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

 

要完成安裝react-native-gesture-handler，請在條目文件的頂部（確保其位於頂部，並且沒有其他內容）添加以下內容，例如index.js或App.js：

import 'react-native-gesture-handler'

注意：如果您跳過此步驟，即使您的應用程序在開發中運行良好，它也會在生產中崩潰。

現在，我們需要將整個應用程序包裝在中NavigationContainer。通常，您可以在條目文件中執行此操作，例如index.js或App.js：

  

import * as React from 'react';

import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>
      {/* Rest of your app code */}
    </NavigationContainer>
  );
}

注意：使用導航器（例如堆棧導航器）時，您需要按照該導航器的安裝說明進行操作，以獲取其他依賴項。如果出現錯誤“無法解析模塊”，則需要在項目中安裝該模塊。

 現在，您可以在設備/模擬器上構建並運行您的應用了。