Javascript 如何将导航对象从React navigation v3中的导航选项传递到侧面板？

我有一些stackNavigator，其中navigationOptions有一个headerLeft，它指向返回TouchableOpacity的组件。当我单击它时，

siderOpened

参数将通过React-Context-API从

false

更改为

true

还有一个Sider组件，它接受

导航

对象属性，它总是

未定义

。Sider的显示取决于菜单按钮组件中更改的

useContext（SideRopedContext）

const ProfileStack = createStackNavigator({
  Profile: {
    screen: Profile,
    navigationOptions: {
      headerBackImage: null,
      headerTitle: 'Profile',
      headerLeft: <MenuButton />
    }
  },
  'Profile.Settings': {
    screen: Settings,
    navigationOptions: {
      headerBackImage: null,
      headerTitle: 'Settings',
      headerLeft: <MenuButton />,
    }
  }
})

（这里所有的堆栈都是统一的）

const菜单按钮=（{navigation}）=>{
const{siderOpened，setSiderOpened}=useContext（SiderOpenedContext）
console.log（导航）
返回(
设置侧绳（！侧绳）}>
)
}

（菜单按钮组件）

const Sider=（{navigation，opened}）=>{
常量{SetSideRoped}=useContext（SideRopedContext）
常数项=[
{
标题：“个人资料”，
onPress:（）=>{navigation.navigate（'Profile'）}
},
{
标题:"关于",，
onPress:（）=>{navigation.navigate（'About'）}
}
{
标题：“反馈”，
onPress:（）=>{navigation.navigate（'About.Feedback'）}
}
]
返回(
SetSideRoped（假）}>⨯
同侧阴唇
{Linking.openURL（'http://example.com') }}>
Example.com
)
}

（侧面组件。

导航

对象总是

未定义

在那里）

export const Navigation = createAppContainer(
  createBottomTabNavigator({
    PasswordRecoveryStack: {
      screen: PasswordRecoveryStack,
      navigationOptions: {
        visible: false,
      },
    },
    RegistrationStack: {
      screen: RegistrationStack,
      navigationOptions: {
        visible: false,
      },
    },
    CourtRental: {
      screen: CourtRentalStack,
      navigationOptions: {
        tabBarIcon: renderIcon(bookingCourt, bookingCourtH),
        title: 'Rentals',
      },
    },
    ProfileStack: {
      screen: ProfileStack,
      navigationOptions: {
        tabBarIcon: renderIcon(profile, profileH),
        title: 'Profile',
      },
    },
    About: {
      screen: AboutStack,
      navigationOptions: {
        tabBarIcon: renderIcon(tournaments, tournamentsH),
        title: 'About'
      }
    }
  })
)

const MenuButton = ({ navigation }) => {
  const { siderOpened, setSiderOpened } = useContext(SiderOpenedContext)
  console.log(navigation)
  return (
    <TouchableOpacity onPress={() => setSiderOpened(!siderOpened)}>
      <Image source={bMenu} resizeMethod="scale" style={{ width: 25, height: 25, marginLeft: 25 }} />
    </TouchableOpacity>
  )
}

const Sider = ({ navigation, opened }) => {
  const { setSiderOpened } = useContext(SiderOpenedContext)

  const items = [
    {
      title: 'Profile',
      onPress: () => { navigation.navigate('Profile') }
    },
    {
      title: 'About',
      onPress: () => { navigation.navigate('About') }
    }
    {
      title: 'Feedback',
      onPress: () => { navigation.navigate('About.Feedback') }
    }
  ]

  return (
    <View style={{ ...styles.root, ...(opened ? styles.rootOpened : {}) }}>
      <View style={styles.top}>
        <Text style={styles.exitBtn} onPress={() => setSiderOpened(false)}>⨯</Text>
      </View>
      <List items={items} />
      <View style={styles.adView}>
        <Text style={styles.desc}>Lorem ipsum dolor</Text>
        <Text style={styles.url} onPress={() => { Linking.openURL('http://example.com') }}>
          Example.com
        </Text>
      </View>
    </View>
  )
}