使用View或ScrollView包装时，react-navigation嵌套堆栈导航器不可见

Question

我在一个复杂的React Native应用程序上工作，该应用程序使用react-navigation库。导航架构是这样的：

• 切换导航器 身份验证堆栈（登录，注册，忘记密码等） 经过验证的堆栈 bottomTabNavigator 3页，其中一个是另一个开关导航器（这里是焦点） 在这个开关导航器（称之为Report）中有多条路由，其中​​一条是新的Stack导航器（称之为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>周围的包装内容完美无缺，内容有效。但是，对于Rulings，导航器中没有显示任何内容。只显示了ReportContainer的主要包装。但是，当我使用React devtools时，我可以看到内容正在呈现，但它不可见。此外，如果我删除<ScrollView>中的ReportContainer，并且只使用<ReportNavigator navigation={navigation} />，它会显示Rulings的内容。

切换ScrollView for 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

我不得不在contentContainerStyle={{ flex: 1 }}上设置<ScrollView>。这使得内容可滚动并呈现Rulings堆栈导航器内容。然而，它确实搞乱了一些其他组件的样式，因此需要修复它们。感谢@Andrew指出我正确的方向！