react-native - 通过 React Navigation 从任何组件访问 navigation prop

Question

我有 3 个 js 文件，2 个页面( HomePage 和 SecondPage )和 1 个页面( ComponentBlock 添加到 HomePage )。
我如何从 ComponentBlock 导航至SecondPage ？ 我的意思是，当我直接在主页中使用 onPress 按钮时，一切都正常，我可以从主页导航到第二个，然后从第二个导航到主页，但我无法从主页中添加的 ComponentBlock 导航到第二个。

主页:

import {createStackNavigator} from 'react-navigation';
import Second from './8-SecondPage'
import ComponentBlock from './8-Component-Block';

class Home extends React.Component {
  render() {
    return (
      <ComponentBlock />
    );
  }
}

const App = createStackNavigator(
  {
    Home: {screen: Home},
    Second: {screen: Second},
    Third: {screen: ComponentBlock},
  },
);

export default App;

第二页:

export default class Second extends Component {
  render() {
    return (
      <View>
        <TouchableOpacity
          onPress={() => this.props.navigation.navigate('Home')}
        >
          <Text>Go to Home Page</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

组件 block :

export default class ComponentBlock extends Component {
  render() {
    return (
      <View>
        <Text>ComponentBlock</Text>
        <TouchableOpacity
          onPress={() => this.props.navigation.navigate('Second')}
        >
          <Text>Go to Second Page</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

Answer 1

在 BlockComponent 文件中

import { withNavigation} from 'react-navigation';
export default withNavigation(BlockComponent);

您现在可以使用

this.props.navigation.navigate('SecondPage');