如何将 navigator.pop 传递给自定义反应原生组件答案

【问题标题】：How to pass navigator.pop to custom react native component如何将 navigator.pop 传递给自定义反应原生组件
【发布时间】：2017-03-17 12:23:39
【问题描述】：

我想将我的导航菜单提取到一个自定义组件中，这样我就不必一直重写代码。这是我的简单dashboard.js

import React, { Component } from 'react';
import {
   StyleSheet,
   View,
   Text,
   Navigator,
  TouchableHighlight,
  TouchableOpacity,
} from 'react-native';

let HeaderMenu = require('../../partials/headerMenu');

class Dashboard extends Component {
  render() {
    return (
      <HeaderMenu/>
   );
  }
}
module.exports = Dashboard;

这是我的 headerMenu.js

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Navigator
} from 'react-native';

class HeaderMenu extends Component {
  render() {
    return (
        <View>
        <Text>Header Menu</Text>
         <TouchableOpacity onPress={()=>{this.props.navigator.pop()}}>
         <Text>BACK</Text>
         </TouchableOpacity>
     </View>
    );
  }
}

module.exports = HeaderMenu;

我的问题是如何通过：

   this.props.navigator.pop()

从我的dashboard.js 文件到我的headerMenu.js 文件，这样后退按钮是否有效？

【问题讨论】：

标签： navigation react-native components

【解决方案1】：

您可以将 Navigator 对象从 dashboard.js 传入 headerMenu.js：

<HeaderMenu navigator={your_navigator_object}/>

然后在 headerMenu.js 中调用this.props.navigator.pop() 应该可以工作。

【讨论】：