react-navigation

问题 I followed exactly the tutorial https://reactnavigation.org/docs/intro/ But the header does not show up. Here is the code and the result import Expo from 'expo'; import React from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; import {StackNavigator} from 'react-navigation'; class HomeScreen extends React.Component { static navigationOptions = { title: 'Welcome', } render() { const {navigate} = this.props.navigation; return ( <View style={styles.container}> <Text>Open

问题 ---------index.js-------- import { AppRegistry } from 'react-native'; import Navigate from './Navigate'; AppRegistry.registerComponent('form1', () => Navigate); ----Navigate.js----- import React from 'react'; import { StackNavigator, DrawerNavigator } from 'react-navigation'; import TabsList from './TabsList'; export const StackTab1 = StackNavigator({ TabList: { screen: TabsList}, }); export const Navigate = DrawerNavigator( { Tab1: { screen : StackTab1 }, Tab2: { screen : StackTab1 }, Tab3:

问题 I am totally confused to achieve something like below, this is working fine but can't hide tab bar for EditPage and PageTwo Login SignUp TabNavigator(TabNavigator) FirstTab SecondTab(StackNavigator) ListPage EditPage ThirdTab(StackNavigator) PageOne PageTwo Settings Below is my configuration for it. import { createStackNavigator, createSwitchNavigator, createBottomTabNavigator } from 'react-navigation'; //Other required imports here const SignedOut = createStackNavigator({ Signup: { screen :

问题 To override navigation options using class components, it would be something like export default class SomeClass extends Component { static navigationOptions = ({ navigation }) => { return { title: navigation.getParam('headerTitle'), } } componentDidMount() { this.props.navigation.setParams({ headerTitle: someVariableThatComesFromExternalCall }) } ... } But how can I do this using functional component?? export default function SomeFunctionalCompoenent({ navigation }) { // How and Where do I

问题 I'm trying to add an overlay (e.g. to display error popups/toasters/debug buttons etc) to a react-navigation navigator. However I have a problem: When I put the react navigator in a view , with the overlay on top, the react navigator either doesn't appear or is distorted in some way. import React, { Component } from 'react'; import { Text, View } from 'react-native'; import { StackNavigator } from 'react-navigation'; class HomeScreen extends React.Component { static navigationOptions = {

问题 I'm getting the error: Invariant Violation: withNavigation can only be used on a view hierarchy of a navigator. The wrapped component is unable to get access to navigation from props or context I don't know why, because I'm using withNavigation in other components in my app and it works. I don't see a difference in the components that it works on to the one that causes the error. Code: the component: const mapStateToProps = (state: State): Object => ({ alertModal: state.formControls

问题 I am using push notification in my react native project and from the push notification i am getting id but first 2 times it's showing me "undefined" so my another navigator call and condition failed. I created new stacknavigator for my push notification but with booking id my condition every time failed. componentWillUnmount() { this.createNotificationListeners(); } This is my push notification function: async createNotificationListeners() { const channel = new firebase.notifications.Android

问题 I have made a custom component for header title(stack navigator)which shows user name along with some image. On this page I have to edit the username and on success Update it in header as well So my question is How to change/update title dynamically? 回答1: This can be done using the navigation props. You can use this.props.navigation.state.params in a component to set a new property. Call: navigation.setParams({ param: value }) See the documentation on headers for more detail. 回答2: the code

问题 I am developing a trivia game, I am using react-navigation to handle navigation, I have 3 components, (newGame, Questions, Results ) I don't want the user to go back to the questions from the results page if the no. of questions has been exhausted, however, pressing the back button ( Android Hardware ) is taking him back to the questions. I then tried to handle the hardware back button like so: componentWillMount() { this.props.gameState(true); BackHandler.addEventListener('hardwareBackPress'

问题 Suppose I have five items in drawer navigation. I want to add separator after three items. How to add this using react-navigation. 回答1: You'll need to use the contentComponent prop to make custom changes. Check out the docs 回答2: As mentioned vonovak, you could achieve this by using contentComponent which allows complete customization of drawer. For this you will need to create custom component which will override default drawer. Code sample: Navigation Drawer ` const NavigationDrawer =