使用功能组件从 navigationOptions 访问导航道具

Question

我想在我的嵌套堆栈导航中添加一个 openDrawer 按钮 header，为此我需要 从具有功能组件的 navigationOptions 访问导航道具。

那是我的代码：

import React from 'react'
import { StatusBar, TouchableOpacity, Text } from "react-native"
import { Container } from "./styles"
import HomeHeader from "./Header"
import HomeBody from "./Body"
import HomeFooter from "./Footer"

import Icon from "react-native-vector-icons/AntDesign"

import CoBrandConfig from "../../../config/CoBrand/config"

export default function Perfil ({ navigation }, props) {

  return(
    <Container>
      <StatusBar barStyle={`${CoBrandConfig.Home.HOME_STATUSBAR_CONTENT}`}
        backgroundColor={CoBrandConfig.Home.HOME_STATUSBAR_COLOR} />
      <TouchableOpacity onPress={() => navigation.navigate("PerfilEditar")}>
        <Text>EDITAR</Text>
      </TouchableOpacity>
      <HomeHeader />
      <HomeBody />
      <HomeFooter />
    </ Container>
  )
}

Perfil.navigationOptions = {
  headerLeft: <Icon.Button name={"menuunfold"} size={24} color={"#f2f2f2"} backgroundColor={"#229182"}
  onPress={() => this.navigation.navigate(openDrawer)}/>,
}

Answer 1

您可以将 Perfil.navigationOptions 分配给接受包含导航的对象的函数，以及 returns 导航选项对象。

Perfil.navigationOptions = ({ navigation }) => ({
  headerLeft: <Icon.Button name={"menuunfold"} size={24} color={"#f2f2f2"} 
                 backgroundColor={"#229182"}
                 onPress={() => navigation.navigate(openDrawer)}/>
})

使用功能组件从 navigationOptions 访问导航道具

Access navigation prop from navigationOpstions with funcional components

react-native

react-navigation

stack-navigator