在 appcontainer 之间进行 react-native 导航

Question

目标是结合 BottomBarNavigator 和 TopBarNavigator。我想在组件 (componentA) 中放置一个 NavigatorB (MaterialTopBarNavigator)，它是 navigatorA (BottomTabNavigator) 的屏幕。

为此，我在我的组件中创建了一个 MaterialTopBarNavigator，并将它包装在一个 AppContainer 中，以便在我的渲染函数中使用它。

在组件A中：

const TabNavigator = createAppContainer(createMaterialTopTabNavigator({
    screen1: { 
        screen: ComponentB,
    },
    screen2: {
        screen: ComponentB,
    }
}))

class ComponentA extends React.Component {

    render() {
        return (
        <View>
            //Some Stuff
            <TabNavigator />
        </View>
        )
    }
}

现在，我想从包含 ComponentA 的导航器从 componentB 导航到另一个屏幕：ComponentC

const MainTabNavigator = createBottomTabNavigator({
   MainScreen1: {
      screen: ComponentA 
   },
   MainScreen2: {
      screen: ComponentC
   }
}

这是我尝试过的：

在组件 B 中：

this.props.navigation.naviguate('MainScreen2', args)

所以不行，因为props.navigation继承自ComponentA中定义的TabNavigator

我搜索了将 componentA 的 props.navigation 传递给 TabNavigator (<TabNavigator args=this.props.navigation>) 的方法，但找不到。

我不确定我这样做是否正确，因为我看到有人建议不要创建多个 appContainer here。但是将 TabNavigator 直接放在 MainTabNavigator 中，将 ComponentA 放在 TabNavigator 中，这不是我想要的，因为我希望共享“//Some Stuff”。

提前感谢您的帮助，请随时向我询问更多详情。

Answer 1

我找到了使用 NavigationService 的方法，我为 MainTabNavigator 创建了 NavigationService 并按照 ComponentB 中指定的方式使用它。

在 appcontainer 之间进行 react-native 导航

react-native naviguate between appcontainers

tabnavigator

react-native