Это мой первый пост, извините за любые ошибки.
Я пытаюсь создать серию вложенных навигаторов, начиная с навигатора Switch, затем переходя к Навигатору Drawer, который для каждого изэто разделы, он вызывает другой стековый навигатор, например:
- SwitchNavigator
- DrawerNavigator
- MapStackNavigator
- ProfileStackNavigator
Исходный маршрут для ящика Navэто стек навигации, который вызывает экран карты.Проблема в том, что если я перейду к разделу «Профиль» навигационной панели, которая вызывает навигацию по стеку, открывающую экран профиля, я не смогу вернуться к экрану карты с помощью метода onPress () внутриЗаголовок навигации.
Реактивное приложение разрабатывается только для iOS, и теперь, поскольку у меня нет ни устройства iOS для тестирования, ни Mac, чтобы использовать симулятор, я сейчас тестирую его на своем Androidсмартфон.
Как я уже тестировал, не было бы проблем, если бы приложение предназначалось для запуска на Android, так как на Android есть встроенная кнопка «Назад», и он автоматически возвращается к предыдущему экрану.(который установлен на экране карты внутри DrawerNav).Но, как и для iOS, нам нужно отобразить кнопку «назад» в верхней части экрана (то есть внутри заголовка StackNav), чтобы вернуться на экран карты.
- Моим первым предположением было использование navigation.navigate внутри onPress () для вызова другого экрана из текущего профиля StackNav, и этот экран вызывает первый созданный мной SwitchNav для загрузки данных., но он не будет работать, так как он действует как «цикл навигации», и const SwitchNavigator не может быть вызван из профиля StackNav.
- Я пытался вызвать StackNav, в котором хранится MapScreen, из onPress (), поэтому это было так: нажмите кнопку «назад»> он вызывает onPress (), которая вызывает другой экран> что другой экран вызываетStackNav содержит MapScreen, но он вложил один StackNav в другой.
Мой Routes.js выглядит следующим образом:
import Testemapa from './src/components/Map/index';
import MyProfile from './src/components/DrawerNavigator/MyProfile';
import Icon from 'react-native-vector-icons/Ionicons';
import IconE from 'react-native-vector-icons/Entypo';
// The StackNav that holds the Map Screen
const IvesStackNavigator = createStackNavigator ({
screenMap: Testemapa,
},
{
defaultNavigationOptions: ({navigation})=>{
return{
headerRight: (<Icon
style={{paddingRight: 10}}
onPress={() => navigation.openDrawer()}
name="md-menu" size={30}
/>)
};
}
});
// What I tried to do to call the MapScreen, but it ends up nesting it inside
const wayBackSwitchNavigator = createSwitchNavigator ({
transitionToHome: IvesStackNavigator,
});
// The StackNav that holds the Profile Screen
const myProfileStackNavigator = createStackNavigator ({
drawer_myProfile: MyProfile,
transitionPathHome: wayBackSwitchNavigator,
},
{
headerBackTitleVisible: 'true',
defaultNavigationOptions: ({navigation})=>{
return{
//This guy is the Back button, that's actually an Icon
headerLeft: (<IconE
style={{paddingLeft: 10}}
onPress={() => navigation.navigate('transitionPathHome')}
name="chevron-small-left" size={30}
/>),
};
},
});
// The Drawer which calls all of the stacks
const MainDrawerNavigator = createDrawerNavigator ({
BOOK_A_RIDE: {
screen: IvesStackNavigator,
navigationOptions: () =>
({
title: 'BOOK A RIDE'
})
},
MY_EARNINGS: {
screen: ridesStackNavigator,
navigationOptions: () =>
({
title: 'MY EARNINGS'
})
},
MY_PROFILE: {
screen: myProfileStackNavigator,
navigationOptions: () =>
({
title: 'MY PROFILE'
})
},
},
{
initialRouteName: 'BOOK_A_RIDE',
drawerOpenRoute:'DrawerOpen',
drawerPosition: 'right',
drawerBackgroundColor: 'black',
hideStatusBar: 'true',
overlayColor: 'red',
edgeWidth: 100,
contentOptions: {
inactiveBackgroundColor: 'black',
inactiveTintColor: '#fff',
activeBackgroundColor: '#4d4d4d',
activeTintColor: '#fff',
},
contentComponent: props =>
<Container style={{alignItems: 'stretch', marginLeft: 0, marginRight : 0, backgroundColor: 'black'}}>
<Header style={{height:150, marginLeft: 0, marginRight : 0, backgroundColor: 'black'}}>
<Body style={{marginLeft: 0, marginRight : 0, backgroundColor: 'black'}}>
<ImageBackground source={require('./src/assets/splash_ImageLimo.jpg')} style={{left: -10, width: 264, height:150, opacity:0.7, marginLeft: 0, marginRight : 0, paddingRight: 0}}>
</ImageBackground>
</Body>
</Header>
<Content>
<DrawerItems {...props} />
</Content>
</Container>
},
);
// The SwitchNav that is the first Navigator to run on the app
const firstSwitchNavigator = createSwitchNavigator(
{
TestDrawer: MainDrawerNavigator,
},
{
initialRouteName: 'TestDrawer',
}
);
export default createAppContainer(MySwitchNavigator);
Итак, когда кнопка «Назад» внутри MyProfileStackNavigator имеетнажата, он должен был вернуться к MapScreen, который хранится в IvesStackNavigator, который находится внутри mainDrawerNavigator.
Мне не разрешено разрешать пользователю открывать DrawerNav изЭкран профиля, поэтому кнопка «Назад» действительно важна, так как это единственный способ вернуться на карту.
Если я попытаюсь напрямую вызвать SwitchNav или DrawerNav с помощью любого изих как путь экрана в MyProfileStackNavigator, я получаю сообщение об ошибке, что вызванный экран не является компонентом React («Компонент для маршрута» transitionToHome 'должен быть компонентом React ... ").
Если я изменю его на прямой вызов IvesStackNavigator, то навигатор окажется вложенным в MyProfileStackNavigator.
И, если я вызову реальную страницу карты, она отобразит страницу карты внутри MyProfileStackNavigator, имея все свойства MyProfileStackNavigator (например, кнопку «Назад» и отсутствие кнопки для открытия меню ящика).
Буду признателен за любую помощь в этом, я довольно новичок в React-Native и его зависимостях, и мне пришлось перейти к праву на кодирование перед изучением, так как это задачаназначенный мне моим боссом, поэтому я стараюсь учиться при создании приложения.