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

Posted 2023-02-23

【中文标题】如何将 navigator.pop 传递给自定义反应原生组件

【英文标题】：How to pass navigator.pop to custom react native component

【发布时间】：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 文件，这样后退按钮是否有效？

【参考方案1】：

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

<HeaderMenu navigator=your_navigator_object/>

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