Question

我对如何声明嵌套的react-navigation导航器感到困惑。

所以我要使其构成的结构是BottomTabNavigator中的一组屏幕，而此BottomTabNavigator在FluidNavigator本身中。现在，主屏幕位于BottomTabNavigator下，但是BottomTabNavigator中的子组件正在使用Fluid Transitions'共享元素转换。由于这种结构，我收到了错误：

TypeError：预期的动态类型为'double'，但类型为'null'

当我删除标签系统时，一切正常。所以我想我创建这些导航器的方式出了问题。

这是我正在使用的结构：

> Fluid Navigator:
  > Home (Bottom Tab Navigator)
    > SharedScreenSource
    > Tab2
    > Tab3
  > SharedScreenDestination

以下是当前参考代码：

const HomeTabsNav = createBottomTabNavigator(
{
    Tab1WithSharedScreenComponent: { screen: Tab1, path: '/tab1' },
    Tab2: { screen: Tab2, path: '/tab2' },
    Tab3: { screen: Tab3, path: '/tab3' }
},
{ tabBarPosition: 'bottom', animationEnabled: false, swipeEnabled: false }
);

const RootStack = createFluidNavigator(
{
    Home: HomeTabsNav,
    SharedScreenDestination: SharedScreenDestination // this screen opens through Tab1's child component
},
{
    initialRouteName: 'Home',
    mode: 'card',
    headerMode: 'none',
    navigationOptions: {
        header: null
    },
}
);

Answer 1

（对我有用的）正确的实现方法是以下结构：

> FluidNavigator:
  > Home (Bottom Tab Navigator)
    > FluidNavigator2:
        > SharedScreenSource
        > SharedScreenDestination
    > Tab2
    > Tab3
  > OtherScreens...

并且在代码中将转换为以下内容：

const FluidNavigator2 = createFluidNavigator(
{
    SharedScreenSource: SharedScreenSource,
    SharedScreenDestination: SharedScreenDestination
},
{
    headerMode: 'none',
    navigationOptions: {
        header: null
    },
}
);

const HomeTabsNav = createBottomTabNavigator(
{
    Tab1WithSharedScreenComponent: { screen: FluidNavigator2, path: '/tab1' },
    Tab2: { screen: Tab2, path: '/tab2' },
    Tab3: { screen: Tab3, path: '/tab3' }
},
{ tabBarPosition: 'bottom', animationEnabled: false, swipeEnabled: false }
);

const RootStack = createFluidNavigator(
{
    Home: HomeTabsNav,
    OtherScreens: OtherScreens // this screen opens through Tab1's child component
},
{
    initialRouteName: 'Home',
    mode: 'card',
    headerMode: 'none',
    navigationOptions: {
        header: null
    },
}
);

我不再收到提到的错误。

在反应导航和FluidTransitions中使用嵌套导航器时发生错误

1 个答案: