react-navigation

How to navigate between different nested stacks in react navigation

由 本小妞迷上赌 提交于 2019-11-28 08:17:00
The Goal Using react navigation, navigate from a screen in a navigator to a screen in a different navigator. More Detail If I have the following Navigator structure: Parent Navigator Nested Navigator 1 screen A screen B Nested Navigator 2 screen C screen D how do I go from screen D under nested navigator 2, to screen A under nested navigator 1? Right now if I try to navigation.navigate to screen A from screen D there will be an error that says it doesn't know about a screen A, only screen C and D. I know this has been asked in various forms in various places on this site as well as GitHub(

react-navigation 3 reset in nested stack

由 痞子三分冷 提交于 2019-11-28 07:43:47
问题 Im try to understand how to reset in nested stack this my code const AuthStack = createStackNavigator( { Welcome, Login, Register, ConfirmationCode, }, { initialRouteName: 'Welcome', headerMode: 'none', lazy: true, transitionConfig, defaultNavigationOptions: { gesturesEnabled: false, }, } ) const AppStack = createStackNavigator( { TabStack, SearchResult, BusinessDetail, BusinessMap, MakeAppointment, TermsAndConditions }, { initialRouteName: 'TabStack', headerMode: 'none', lazy: true,

React Navigation V2: Difference between navigation.push and navigation.navigate

由 懵懂的女人 提交于 2019-11-28 07:16:05
问题 I'm new to React Native and I'm currently studying the React Native Navigation Docs. I was wondering: What is the difference between navigation.push() and navigation.navigate() ? I tried finding it out by myself, but they seem to accomplish the exact same thing... 回答1: If you check the documentation for push, there is an explanation of how different they are. The Push action adds a route on top of the stack and navigates forward to it. This differs from navigate in that navigate will pop back

How to dispatch multiple actions in react-navigation?

由 牧云@^-^@ 提交于 2019-11-28 05:09:50
问题 I want to perform two actions but it doesn't work. const backAction = NavigationActions.back({ key: null }) const dispatchLogoutAction = NavigationActions.reset({ index: 0, actions: [NavigationActions.navigate({routeName: "LoginView"})] }); nextProps.navigation.dispatch(backAction); nextProps.navigation.dispatch(dispatchLogoutAction); What other ways to dispatch both actions in react-navigation rather than listing dispatch statements parallelly? 来源： https://stackoverflow.com/questions

Hide header in stack navigator React navigation

由 ℡╲_俬逩灬. 提交于 2019-11-28 04:37:20
I'm trying to switch screen using both stack and tab navigator. const MainNavigation = StackNavigator({ otp: { screen: OTPlogin }, otpverify: { screen: OTPverification}, userVerified: { screen: TabNavigator({ List: { screen: List }, Settings: { screen: Settings } }), }, }); In this case stacknavigator is used first and then tabnavigator. and i want to hide headers of stack navigator. WIt is not working properly when i use navigationoptions like:: navigationOptions: { header: { visible: false } } i'm trying this code on first two components which are using in stacknavigator. if i use this line

React Navigation modal height

由 筅森魡賤 提交于 2019-11-28 03:40:15
问题 How do I set the height a React Navigation modal view so once it has appeared it will only cover about half of the screen from the bottom up, and the view below remains visible? Update: I'm trying to create a ux flow similar to the App Store purchase modal, where some kind of StackNavigator is nested in a modal that fills the bottom half of the screen. 回答1: In your stacknavigator you can set these options: mode: 'modal', headerMode: 'none', cardStyle:{ backgroundColor:"transparent", opacity:0

From left to right window animation with react-navigation?

由 元气小坏坏 提交于 2019-11-28 01:31:45
问题 Is there a way to implement animation that goes from left to right with navigate() function in react-navigation ? Thanks in advance. 回答1: when you define your screens, you can use transitionConfig option. const Stack = StackNavigator( { SomeScreen: { screen: ... }, }, { transitionConfig: customAnimationFunc, } ); ... import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator'; const customAnimationFunc = () => ({ screenInterpolator: sceneProps => {

Passing props with screen option in DrawerNavigator

由 扶醉桌前 提交于 2019-11-28 01:24:46
问题 I am using DrawerNavigator in https://reactnavigation.org/docs/navigators/drawer. const MyApp = DrawerNavigator({ Home: { screen: MyHomeScreen, }, Notifications: { screen: MyNotificationsScreen, }, }); I have multiple screens that are using MyNotificationsScreen component with different props. How can I do something like: const MyApp = DrawerNavigator({ Home: { screen: MyHomeScreen, }, Notifications1: { screen: MyNotificationsScreen(propName=val1), }, Notifications2: { screen:

React Navigation: Swipe on drawer does not work in Android

由 ↘锁芯ラ 提交于 2019-11-27 19:39:15
I have been searching for a solution for a long time, but surprisingly, I think nobody has faced it yet. So I am posting it. I have created a simple Drawer Navigator with React Navigation V3. I have added a Menu icon, and when I click it, the drawer appears as it should be. But, no hand gesture is working. Swiping from left to right don't do anything. Even when the drawer is open, tapping on empty space doesn't close the drawer. Here is my code: import { createStackNavigator, createSwitchNavigator, createAppContainer, createDrawerNavigator } from 'react-navigation'; import Home from './screens

Resetting the navigation stack for the home screen (React Navigation and React Native)

由 ▼魔方 西西 提交于 2019-11-27 18:45:09
I've got a problem with the navigation of React Navigation and React Native. It is about resetting navigation and returning to the home screen. I've build a StackNavigator inside of a DrawerNavigator, and the navigation between home screen and other screens is working. But the problem is, that the navigation stack grows and grows. I'm not sure how to remove a screen from the stack. For example when going from the home screen to the settings screen, then to the entry screen and lastly again to the home screen, the home screen is twice in the stack. With the back button I do not get out of the
订阅 react-navigation