为屏幕“搜索”提供了“组件”和“子项”道具。您只能通过其中一项

Question

我在开发一个react-native应用程序，这个项目使用react-navigation 4.x来在应用程序中导航。我最近将项目升级到了 React-navigation 5.x，在尝试升级时遇到了问题。问题是我的项目同时有 aFooterNavigator和 a DrawerNavigator，它们都调用同一个组件。

我们已经找到了解决react-navigation 4.x中问题的方法，但是新版本的react-navigation需要每个Screen. 有什么办法让我同时拥有两个导航器还是降级更好？

错误的图像

这是我的 FooterNavigator

const Tab = createBottomTabNavigator();

    export const FooterNavigator = () => {
        return (
                <Tab.Navigator>
                    <Tab.Screen name="Search" component={Search}>
                        <Button>
                                <Icon name="magnify" type="MaterialCommunityIcons"/>
                              <Text style={footerStyle.footerText}>Zoeken</Text>
                        </Button>
                    </Tab.Screen>
                    <Tab.Screen name="Count" component={Count}>
                        <Button>
                                <Icon name="counter" type="MaterialCommunityIcons"/>
                                <Text style={footerStyle.footerText}>Tellen</Text>
                        </Button>
                    </Tab.Screen>
                    <Tab.Screen name="Identify" component={Identify}>
                        <Button>
                                <Icon name="file-question" type="MaterialCommunityIcons"/>
                                <Text style={footerStyle.footerText}>Herken</Text>
                        </Button>
                    </Tab.Screen>
                    <Tab.Screen name="Program" component={Program}>
                        <Button>
                                <Icon name="chip" type="MaterialCommunityIcons"/>
                                <Text style={footerStyle.footerText}>Wijzig</Text>
                        </Button>
                    </Tab.Screen>
                </Tab.Navigator>
        )
    }

这是我的 DrawerNavigator

export const RootNavigator = () => {
    let DrawerScreens = [];
    Routes.forEach(function (route) {
        DrawerScreens.push(<Drawer.Screen name={route.name} component={route.component}/>)
    });
    return (

        <Drawer.Navigator>
            {DrawerScreens}
        </Drawer.Navigator>
    )
}

它们都在我的 Layout.js 中调用和渲染

render() {
        return (
            <NavigationContainer>
                <RootNavigator />
                <FooterNavigator/>
            </NavigationContainer>
        )
    }

提前谢谢了 ！！

Answer 1

用这个

<Stack.Screen name="Home" component={HomeScreen} />

而不是这个

<Stack.Screen name="Home" component={HomeScreen}> </Stack.Screen>

解决你的问题

  <NavigationContainer>
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Home" component={HomeScreen}/>
      <Stack.Screen name="Details" component={DetailScreen} />
    </Stack.Navigator>
  </NavigationContainer>