React导航5中的嵌套材料顶部选项卡导航器

时间:2020-06-08 08:17:24

标签: javascript reactjs react-native react-navigation

我只是想使用react-navigation v5嵌套2个主要的顶部标签导航器。父级标签导航器工作正常,但其第二个屏幕(这是我的第二个顶部标签导航器)无法正常工作。在父级顶部选项卡导航器的结构中,我有2个屏幕,screen1和子级顶部选项卡导航器作为屏幕2。但是,以某种方式,当我滑动到第二个屏幕即子级导航器时,无法在screen3和screen2之间切换在里面。当我尝试转到screen3时,将其带回子标签导航器中的screen2。

在这里您可以看到我的代码:

        const Theater = createMaterialTopTabNavigator();
    const Theater2 = createMaterialTopTabNavigator();

    const screen1 = ({ route }) => (
        <View style={{ flex: 1, backgroundColor: "red" }} />
    );
    const screen2 = ({ route }) => (
        <View style={{ flex: 1, backgroundColor: "yellow" }} />
    );
    const screen3 = ({ route }) => (
        <View style={{ flex: 1, backgroundColor: "purple" }} />
    );

    const TheaterStack2 = (props) => {
        return (
            <Theater2.Navigator>
                <Theater2.Screen name="home2" component={screen3} />
                <Theater2.Screen name="detail2" component={screen2} />
            </Theater2.Navigator>
        );
    };

    const TheaterStack = (props) => {
        return (
            <Theater.Navigator>
                <Theater.Screen
                    name="home"
                    component={screen1}
                    initialParams={{
                        item: props.data,
                        type: "theater",
                        self_link: props.data.self_link,
                    }}
                />
                <Theater.Screen name="detail" component={TheaterStack2} />
            </Theater.Navigator>
        );
    };

0 个答案:

没有答案