当使用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为我指出正确的方向！