react-navigation

问题 Hello I have a simple app and i want to add a drawer to him I use react-navigation 4x and use react-navigation-drawer to implement Drawer in my app I used it before sperate drawer in a single package and it's worked fine but when I use the new package I got this error Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from

问题 I have some issue when navigating from top Tabnavigator to other screens so my app navigation is My Orders Screen from Drawer => Top TabNavigatore (Accepted/Completed) => Order Details In Route.js I put every single navigation I want like Drawer - Auth navigation and so on, and I put a StackNavigator contain the Orders Screen like this: const OrdersStack = createStackNavigator({ Orders: { screen: Orders, navigationOptions: ({ navigation }) => ({ headerLeft: ( // <TouchableOpacity onPress={()

问题 I have a leaderboard which calls a component and passes it data to it like so: _renderItem =({item}) => ( <childComponent key={item._id} id={item._id} name={item.name} /> ); And inside the childComponent I try do this: <TouchableOpacity onPress={() => this.props.navigation.navigate("Profile", { id: this.props.id})} > <View> <Right> {arrowIcon} </Right> </View> </TouchableOpacity> Where I am hoping that it will then go to the profile page and grab the correct data based on the id passed to it.

问题 How do you handle cases when you have, say, a form component, and you need to submit a part of the component's state using button in navigation bar? const navBtn = (iconName, onPress) => ( <TouchableOpacity onPress={onPress} style={styles.iconWrapper} > <Icon name={iconName} size={cs.iconSize} style={styles.icon} /> </TouchableOpacity> ) class ComponentName extends Component { static navigationOptions = { header: (props) => ({ tintColor: 'white', style: { backgroundColor: cs.primaryColor },

问题 I would like after Login (Welcome) the user to navigate to Home. I reset the history so the user cannot go back like this: const actionToDispatch = NavigationActions.reset({ index: 0, actions: [NavigationActions.navigate({ routeName: 'Home' })] }); this.props.navigation.dispatch(actionToDispatch); This works properly. After pressing Log Out the user should go back to Welcome but it's not working . Here's what exactly I am doing: const resetAction = NavigationActions.reset({ index: 0, actions:

问题 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 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'd like to use React Navigation in my new react native app but I can't find any example showing how to create custom view transitions in there. Default transitions are working fine but I'd like to be able to customize them in few places and the docs don't come very helpfull in this subject. Anyone tried that already? Anywhere I could see a working example? Thanks in advance. 回答1: You can find detailed version of this post on this link I hope this is clear enough with step-by-step for how to

问题 I was trying to use StackNavigator for navigation and it works when I use it to go from one screen to the other as explained here. But when I try to have a subcomponent to navigate through itself, the navigation doesn't seem to work and I couldn't find any solution to it. As given in the code below, I'm trying to use the Test Component in which there is a button that can be clicked to move from HomeScreen to ChatScreen. I'm pretty sure the solution is something basic, but I really can't find

问题 I am new to react native and I am trying to create an app with stack navigation. This is what I have on my App.js import React from "react"; import { View, Text } from "react-native"; // Import React Navigation import { createStackNavigator, createAppContainer } from 'react-navigation' // Import the screens import Main from './components/Main'; import Chat from './components/Chat'; // Create the navigator const navigator = createStackNavigator({ Main: { screen: Main }, Chat: { screen: Chat },