Я работаю над собственным приложением реакции, и в этом проекте для навигации по приложению использовалась реагирующая навигация 4.x. Я недавно обновил проект до 5.x реагирующей навигации и, пытаясь обновить, столкнулся с проблемой. Проблема в том, что в моем проекте есть и FooterNavigator
, и DrawerNavigator
, они оба вызывают один и тот же компонент.
Мы уже нашли способ исправить проблему в реакции-навигации 4.x, но новая версия реагировать на навигацию требует имя и компонент для каждого 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>
)
}
Они оба вызываются и воспроизводятся в моем макете. js
render() {
return (
<NavigationContainer>
<RootNavigator />
<FooterNavigator/>
</NavigationContainer>
)
}
Большое спасибо заранее !!