Question

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

切换导航器
- 身份验证堆栈（登录，注册，忘记密码等）
- 经过认证的堆栈
- bottomTabNavigator
  - 3页，其中一个是另一个开关导航器（此处是重点）
    - 在此切换导航器（称为“报告”）中有多条路由，其中一个是新的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>周围的换行内容可以完美工作，并且该内容可以正常工作。但是，对于“裁定”，导航器中不会显示任何内容。仅显示ReportContainer中的主包装。但是，当我使用React devtools时，可以看到正在渲染内容，但是看不到它。此外，如果我删除了<ScrollView>中的ReportContainer，而只是使用<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

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

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

1 个答案: