反应导航嵌套堆栈导航器在使用视图或滚动视图包装时不可见

Question

i在使用React-Navigation库的复杂反应本机应用程序上工作。导航架构是这样的：

• 开关导航器
  • 身份验证堆栈（登录，注册，忘记密码等）
  • 身份验证的堆栈
  • 底部tabnavigator
    • 3页，其中之一是另一个开关导航器（这是这里的焦点）
      • 在此交换机中（调用报告）是多个路线，其中之一是新的堆栈导航器（调用IT裁定）

"报告"交换机导航器包裹在一个容器中，该容器的所有屏幕都有该级别的

这是一个小的代码示例：

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} />，则显示裁决的内容。

切换滚动视图的视图存在相同的问题，但是如果我切换到 <React.Fragment>，它可以正常工作，包装内容以及所有内容。但是显然，由于它不再是卷轴，因此内容不可滚动。我需要内容和包装器可以滚动。

如果我在导航器组件上方添加一些代码，则是这样的：

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

显示了文本，但是导航器中没有任何内容可见。看着检查员，他们都是<ScrollView>的孩子。

因此，问题是，<ScrollView><ReportSwitchNavigator /></ScrollView>（或<View>）似乎拧紧了父开关导航器内部深处嵌套的堆栈导航器。我该怎么做才能解决这个问题？是预期的行为还是我应该在零食上举一个例子，并提交反应 - 行动问题？

Answer 1

我必须在<ScrollView>上设置contentContainerStyle={{ flex: 1 }}。这使内容可滚动并渲染裁决堆栈导航器内容。但是，它确实弄乱了其他一些组件的样式，因此需要修复它们。感谢@Andrew将我指向正确的方向！