react-native - 获得屏幕“搜索”的“组件”和“儿童”道具。你只能通过其中之一

Question

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

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

错误图片

这是我的页脚导航器

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

提前谢谢了 ！！

标签： react-nativenavigationreact-native-navigation

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>