use navigate method anywhere

Question

I have a component that not assign in StackNavigator . However I still want to use navigate method from react-navigation . Is that possible ?

For example:

manage.js

export const mainStack = StackNavigator({
  Home: { screen: HomeScreen},
  Content: { screen: ContentScreen },
});

OtherContent.js

class OtherContent extends React.Component {
    constructor(props) {
      super(props);
    }

    _MoveToScreen = () =>{
        //try to open ContentScreen from here
        const { navigate } = this.props.navigation;
        navigate('ContentScreen');
    }

}

I want to use navigate in OtherContent component. How can I pass the navigation props to the component.

Answer 1

使用redux并将其置于状态，然后我可以从那里调用它

Answer 2

You can pass navigation from parent as props or use withNavigation Higher Order Component by react-navigation

Example 1:

<OtherContent navigation={this.props.navigation} />

Example 2:

import React from 'react';
import { withNavigation } from 'react-navigation';

class OtherContent extends React.Component {
    constructor(props) {
      super(props);
    }

    _MoveToScreen = () =>{
        //try to open ContentScreen from here
        const { navigate } = this.props.navigation;
        navigate('ContentScreen');
    }
    // ...
}

const OtherContentWithNavigation = withNavigation(OtherContent);

;