آموزش جاوااسکریپت › انجمن ها › react native › بازگشت به Screen قبلی در ReactNavigation
- این موضوع 6 پاسخ، 3 کاربر را دارد و آخرین بار در 4 سال، 11 ماه پیش بدست پیام بهروزرسانی شده است.
-
نویسندهنوشتهها
-
پیاممشارکت کننده
با سلام
دوستان من یه ساختار تو در تو دارم در ReactNavigation مشابه همچین چیزیJavaScript12345678910Category:{List,Item}Tab:{Home,Category,Profile}حالا توی هر کدوم از تب ها یه StackNavigator دارم که توی بخش های مختلف کاربر رو منقل میکنم به Item که یه اسکرین توی استک تب Category هست.
حالا میخوام وقتی کاربر دکمه بک رو زد برگرده به اسکرینی که از اونجا رفته به Item ولی برمیگرده به روت تب Category
مثلا از Home کاربر رو میفرستم به Item میخوام وقتی بک رو زد دوباره برگرده به home ولی به Category منتقل میشه و میره به روتی که برای استک Category تعریف شده.راه حلی پیشنهاد میدین که این مورد رو بر طرف کنم ؟
مهدی حسن زادهمدیرکلسلام.
باید tabNavigator درون stackNavigator قرار بگیره و StackNavigator به عنوان کامپوننت اصلی باشه.
حالا درون TabNavigator اگه چهار تا Tab داری.باید به هر Tab یک StackNavigator داده باشی نه یک کامپوننت.
برای برگشت بهد یک کامپوننت خاص هم میتونی از دستورات زیر استفاده کنی
class HomeScreen extends React.Component {
render() {
const { goBack } = this.props.navigation;
return (
);
}
}پیاممشارکت کنندهدقیق توضیح بدم من یه SwitchNavigator دارم که ازش برای اسپلش استفاده کردم بعدش میاد به DrawerNavigator و میخوام این Drawer روی تمام تب ها باشه که اون 4 تا تب به عنوان یکی از بخش های این Drawer هستند و هرکدام از Tab ها خودشون یه StackNavigator جدا دارن
روتینگ من دقیقا این هستش
حالا من نمیدونم از کدوم اسکرین و کدوم تب یا کدوم Stack اومدم توی اسکرین Item که بخوام برش گردونم به همون Stack قبلی از همون تب قبلی
goBack(null) هم تست کرده بودم جواب کار منو ندادJavaScript123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111const ProfileScreensStack = createStackNavigator({EditProfile: { screen: ProfileEditProfile },ProfileScreens: { screen: ProfileScreen },EditProfile: { screen: ProfileEditProfile },Favorites: { screen: ProfileFavorites },Comments: { screen: ProfileComments },Orders: { screen: ProfileOrders },OrderItem: { screen: ProfileOrderItem },Address: { screen: ProfileAddress },AddressManager: { screen: ProfileAddressManager }},{initialRouteName: "ProfileScreens"});const UserAuthenticationStack = createSwitchNavigator({Account: { screen: AccountScreen },Login: { screen: LoginScreen },Register: { screen: RegisterScreen },Profile: { screen: ProfileScreensStack },ForgetPass: { screen: ForgetPassScreen },ConfirmCode: { screen: ConfirmCodeScreen },ConfirmCodeResend: { screen: ConfirmCodeResendScreen },ResetPass: { screen: ResetPassScreen }},{initialRouteName: "Account"});const ProductListMainNavigator = createStackNavigator({ProductList: { screen: ProductListScreen },ProductFilter: { screen: ProductFilterScreen }},{mode: "modal",headerMode: "none"});const ProductsNavigator = createStackNavigator({CategoryList: { screen: CategoryScreen },ProductListMain: { screen: ProductListMainNavigator },ProductItem: { screen: ProductItemScreen },ProductComments: { screen: ProductCommentsScreen },ProductAttributes: { screen: ProductAttributesScreen }},{initialRouteName: "CategoryList"});const HomeStackNavigator = createStackNavigator({Home: { screen: HomeScreen },ProductSearch: { screen: ProductSearchScreen }},{initialRouteName: "Home"});const CartStackNavigator = createStackNavigator({CartItems: { screen: CartScreen },CartDelivery: { screen: DeliveryScreen },CartReturn: { screen: ReturnScreen },CartShipping: { screen: ShippingScreen }},{initialRouteName: "CartItems"});const MainTabNavigator = createBottomTabNavigator({Home: { screen: HomeStackNavigator },Category: { screen: ProductsNavigator },Cart: { screen: CartStackNavigator },AccountScreen: { screen: UserAuthenticationStack }},{initialRouteName: "Home"});const MainDrawerNavigator = createDrawerNavigator({Home: { screen: MainTabNavigator },Favorite: { screen: ProfileFavorites }},{initialRouteName: "Home"});export const StartStack = createSwitchNavigator({Splash: { screen: SplashScreen },Main: { screen: MainDrawerNavigator }},{initialRouteName: "Splash"});مهدیمیهمانیک آموزش متنی در این مورد آماده کردیم که به احتمال زیاد فردا منتشر میشه.
پیاممشارکت کنندهممنون
حالا نمیشه بی زحمت یه قسمتشو بزاری کار ما راه بیوفته ؟ 😀مهدیمیهمانالبته تو این آموزش متنی نحوه استفاده از TabNavigator درون Stack گفته شده.فردا منتشر میشه به صورت خودکار
پیاممشارکت کنندهپس فک نکنم راه حل مشکل من باشه
به هر حال ممنون -
نویسندهنوشتهها