بازگشت به Screen قبلی در ReactNavigation

این موضوع 6 پاسخ، 3 کاربر را دارد و آخرین بار در 4 سال، 4 ماه پیش بدست پیام به‌روزرسانی شده است.

در حال نمایش 7 نوشته (از کل 7)

نویسنده

نوشته‌ها

ژانویه 9, 2019 در 9:45 ق.ظ #24936 پاسخ

مشارکت کننده

با سلام
دوستان من یه ساختار تو در تو دارم در ReactNavigation مشابه همچین چیزی

Category:{
List,
Item
}

Tab:{
Home,
Category,
Profile
}

Category:{

List,

Item

}

Tab:{

Home,

Category,

Profile

}

حالا توی هر کدوم از تب ها یه StackNavigator دارم که توی بخش های مختلف کاربر رو منقل میکنم به Item که یه اسکرین توی استک تب Category هست.
حالا میخوام وقتی کاربر دکمه بک رو زد برگرده به اسکرینی که از اونجا رفته به Item ولی برمیگرده به روت تب Category
مثلا از Home کاربر رو میفرستم به Item میخوام وقتی بک رو زد دوباره برگرده به home ولی به Category منتقل میشه و میره به روتی که برای استک Category تعریف شده.

راه حلی پیشنهاد میدین که این مورد رو بر طرف کنم ؟

ژانویه 9, 2019 در 10:25 ق.ظ #24949 پاسخ

مهدی حسن زاده

مدیرکل

سلام.
باید tabNavigator درون stackNavigator قرار بگیره و StackNavigator به عنوان کامپوننت اصلی باشه.
حالا درون TabNavigator اگه چهار تا Tab داری.باید به هر Tab یک StackNavigator داده باشی نه یک کامپوننت.
برای برگشت بهد یک کامپوننت خاص هم میتونی از دستورات زیر استفاده کنی
class HomeScreen extends React.Component {
render() {
const { goBack } = this.props.navigation;
return (

);
}
}

ژانویه 9, 2019 در 10:40 ق.ظ #24950 پاسخ

پیام

مشارکت کننده

دقیق توضیح بدم من یه SwitchNavigator دارم که ازش برای اسپلش استفاده کردم بعدش میاد به DrawerNavigator و میخوام این Drawer روی تمام تب ها باشه که اون 4 تا تب به عنوان یکی از بخش های این Drawer هستند و هرکدام از Tab ها خودشون یه StackNavigator جدا دارن
روتینگ من دقیقا این هستش
حالا من نمیدونم از کدوم اسکرین و کدوم تب یا کدوم Stack اومدم توی اسکرین Item که بخوام برش گردونم به همون Stack قبلی از همون تب قبلی
goBack(null) هم تست کرده بودم جواب کار منو نداد


const 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: &quot;ProfileScreens&quot;
  }
);

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: &quot;Account&quot;
  }
);

const ProductListMainNavigator = createStackNavigator(
  {
    ProductList: { screen: ProductListScreen },
    ProductFilter: { screen: ProductFilterScreen }
  },
  {
    mode: &quot;modal&quot;,
    headerMode: &quot;none&quot;
  }
);

const ProductsNavigator = createStackNavigator(
  {
    CategoryList: { screen: CategoryScreen },
    ProductListMain: { screen: ProductListMainNavigator },
    ProductItem: { screen: ProductItemScreen },
    ProductComments: { screen: ProductCommentsScreen },
    ProductAttributes: { screen: ProductAttributesScreen }
  },
  {
    initialRouteName: &quot;CategoryList&quot;
  }
);

const HomeStackNavigator = createStackNavigator(
  {
    Home: { screen: HomeScreen },
    ProductSearch: { screen: ProductSearchScreen }
  },
  {
    initialRouteName: &quot;Home&quot;
  }
);

const CartStackNavigator = createStackNavigator(
  {
    CartItems: { screen: CartScreen },
    CartDelivery: { screen: DeliveryScreen },
    CartReturn: { screen: ReturnScreen },
    CartShipping: { screen: ShippingScreen }
  },
  {
    initialRouteName: &quot;CartItems&quot;
  }
);

const MainTabNavigator = createBottomTabNavigator(
  {
    Home: { screen: HomeStackNavigator },
    Category: { screen: ProductsNavigator },
    Cart: { screen: CartStackNavigator },
    AccountScreen: { screen: UserAuthenticationStack }
  },
  {
    initialRouteName: &quot;Home&quot;
  }
);

const MainDrawerNavigator = createDrawerNavigator(
  {
    Home: { screen: MainTabNavigator },
    Favorite: { screen: ProfileFavorites }
  },
  {
    initialRouteName: &quot;Home&quot;
  }
);

export const StartStack = createSwitchNavigator(
  {
    Splash: { screen: SplashScreen },
    Main: { screen: MainDrawerNavigator }
  },
  {
    initialRouteName: &quot;Splash&quot;
  }
);

100

101

102

103

104

105

106

107

108

109

110

111

const 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 },

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"

}

);

ژانویه 9, 2019 در 10:50 ق.ظ #24951 پاسخ

مهدی

میهمان

یک آموزش متنی در این مورد آماده کردیم که به احتمال زیاد فردا منتشر میشه.

ژانویه 9, 2019 در 11:25 ق.ظ #24952 پاسخ

پیام

مشارکت کننده

ممنون
حالا نمیشه بی زحمت یه قسمتشو بزاری کار ما راه بیوفته ؟ 😀

ژانویه 9, 2019 در 11:41 ق.ظ #24954 پاسخ

مهدی

میهمان

البته تو این آموزش متنی نحوه استفاده از TabNavigator درون Stack گفته شده.فردا منتشر میشه به صورت خودکار

ژانویه 9, 2019 در 11:51 ق.ظ #24955 پاسخ

پیام

مشارکت کننده

پس فک نکنم راه حل مشکل من باشه
به هر حال ممنون

نویسنده

نوشته‌ها

در حال نمایش 7 نوشته (از کل 7)