react-native - 在 react-navigation 和 FluidTransitions 中使用嵌套导航器时出错

Question

我对如何声明我的嵌套反应导航导航器感到困惑。

因此，我尝试制作的结构是 BottomTabNavigator 中的一组屏幕，而该 BottomTabNavigator 本身位于 FluidNavigator 中。现在，HomeScreen 位于 BottomTabNavigator 下，但 BottomTabNavigator 中的子组件正在使用Fluid Transitions的 Shared Element Transition。由于这种结构，我收到错误：

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
    },
}
);

标签： react-nativereact-navigation

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
    },
}
);

我不再收到上述错误。