反应导航传递功能，作为自定义标题组件的道具

Question

我在我的本机应用程序中使用了react-navigation 4。我想将自定义标题组件用于屏幕标题。我的导航器是这样的：

const MapTab = createStackNavigator({
  MapContainer: {
    screen: MapContainer,
    navigationOptions: {
      header: props => 
        <HeaderMap openDrawer={props.navigation.getParam('openDrawer')} />,
    },
  },
});

如我们所见，我需要将openDrawer函数传递给我的<HeaderMap>以在按下屏幕抽屉时打开它。在屏幕上，我已将openDrawer函数主体设置为didMount事件的导航参数。

componentDidMount() {
  this.props.navigation.setParams({ openDrawer: this.drawer.openDrawer.bind(this) });
}

而且我在HeaderMap上将其称为如下：

<TouchableOpacity onPress={() => this.props.openDrawer()}>
   <Icon name="ios-menu" color={colors.white} size={30} />
</TouchableOpacity>

但是它没有按预期工作。我总是在按下按钮时收到这样的错误：Cannot read property 'getParam' of undefined。我认为当我呼叫props.navigation时undefined是getParam。

对此案有何见解？ TiA。

Answer 1

我尝试了如下相同的代码：

const MyNavigator = createStackNavigator({


'My Pharmacy': {
    screen: Home,
    navigationOptions: {
      header: props => 
        <HeaderComp value={props} />,
    },

  },

HeaderComp是：

    class HeaderComp extends Component{
      componentDidMount(){
      console.log('header props are: ',this.props)
    }

    render(){
      return(
        null
        )
      }
    }

慰问道具之后，我得到了导航对象。

因此，您的道具工作正常，但设置参数时出了点问题。如果从该堆栈外部传递数据，则必须通过screenProps传递数据。否则，如果您在“ MapContainer”屏幕内设置参数，则无需执行此操作，因为标头组件已获取它。尝试一下，如果仍然遇到相同的问题，请添加更多有关问题的详细信息，从何处传递参数以及从何处获得它。