當使用View或ScrollView包裝時，react-navigation嵌套堆棧導航器不可見

Question

我在一個復雜的React Native應用程序上工作，該應用程序使用react-navigation庫。 導航架構是這樣的：

• 切換導航器
  • 身份驗證堆棧（登錄，注冊，忘記密碼等）
  • 認證堆棧
  • bottomTabNavigator
    • 3頁，其中一個是另一個開關導航器（此處是重點）
      • 在此開關導航器（稱為“報告”）中有多個路由，其中​​之一是新的堆棧導航器（稱為“ Rulings”）

“報告”開關導航器包裝在一個容器中，該容器具有此級別的所有屏幕。

這是一個如何編寫這些代碼的小代碼示例：

const AppNavigator = createSwitchNavigator({
  Authentication: createStackNavigator({
    Login,
    Register
    // etc
 }),
 Authenticated: createStackNavigator({
   Main: {
     screen: createBottomTabNavigator({
       tab1,
       tab2,
       Report: ReportContainer
    })
   // other screens outside of the tab navigator but still at the top level
})

const ReportNavigator = createSwitchNavigator({
  page1,
  page2,
  Rulings: createStackNavigator({
    RulingsHome: <Text>Rulings Home</Text>,
    // other screens
  })

const ReportContainer = ({ navigation }) => (
  <ScrollView>
    // other stylistic stuff
    <ReportNavigator navigation={navigation} />
  </ScrollView>
)

抱歉，如果我在這里犯了錯誤，那只是一個例子。

因此，報表導航器可在所有其他屏幕上完美運行。 <ReportNavigator>周圍的換行內容可以完美工作，並且該內容也可以正常工作。 但是，對於“裁定”，導航器中不會顯示任何內容。 僅顯示ReportContainer的主包裝。 但是，當我使用React devtools時，可以看到正在渲染內容，但是看不到它。 此外，如果刪除ReportContainer的<ScrollView> ，而僅使用<ReportNavigator navigation={navigation} /> ，它將顯示規則的內容。

將ScrollView切換為View也有同樣的問題，但是如果我切換到<React.Fragment> ，它將起作用，並且包裝內容和所有內容。 但是顯然，由於它不再是ScrollView，所以內容不可滾動。 我需要內容和包裝是可滾動的。

如果我在Navigator組件上方添加一些代碼，如下所示：

const ReportContainer = ({ navigation }) => (
  <ScrollView>
    // other stylistic stuff
    <Text>Hello, world!</Text>
    <ReportNavigator navigation={navigation} />
  </ScrollView>
)

雖然顯示了文本，但導航器中的任何內容均不可見。 看着檢查器，它們都是<ScrollView> ，應該是。

因此，問題在於， <ScrollView><ReportSwitchNavigator /></ScrollView> （或<View> ）似乎將父開關導航器內部深層嵌套的堆棧導航器搞砸了。 我該怎么辦才能解決這個問題？ 這是預期的行為還是我應該在Snack上舉一個例子並提交給響應導航問題？

Answer 1

我必須在<ScrollView>上設置contentContainerStyle={{ flex: 1 }} 。 這使內容可滾動，並呈現Rulings堆棧導航器內容。 但是，它確實弄亂了其他一些組件的樣式，因此需要對其進行修復。 感謝@Andrew為我指出正確的方向！