有没有办法把 `options` 变成和 `navigationOptions` 一样的功能呢？答案

【问题标题】：Is there anyway to turn `options` into a function same like `navigationOptions` do?有没有办法把 `options` 变成和 `navigationOptions` 一样的功能呢？
【发布时间】：2020-08-21 20:32:44
【问题描述】：

目前，我在 coursera 中学习一门课程：Multiplatform Mobile App Development with React Native，每次讲课后我都被困住了，因为讲师使用react-navigation@2.0.1，但我想确保学习最新版本（v5）。在本次讲座中，他创建了一个堆栈导航器并将一个图标带到屏幕上，例如，

import {createStackNavigator} from 'react-navigation';
import { Icon } from 'react-native-elements';

const MenuNavigator = createStackNavigator(
  {
    Menu: {
      screen: Menu,
      navigationOptions: ({ navigation }) => ({
        headerLeft: (
          <Icon
            name="menu"
            size={24}
            color="white"
            onPress={() => navigation.toggleDrawer()}
          />
        ),
      }),
    },
    Dishdetail: { screen: Dishdetail },
  },
  {
    initialRouteName: 'Menu'
  }
);

navigationOptions 可以是一个对象，也可以是一个接收 props 的函数。

我把它转换成这样，

import { createStackNavigator } from '@react-navigation/stack';
import { Icon } from 'react-native-elements';

const MenuNavigator = createStackNavigator();
function MenuNavigatorScreen() {
  return (
    <MenuNavigator.Navigator
      initialRouteName="Menu"
      screenOptions={HeaderOptions}
    >
      <MenuNavigator.Screen
        name="Menu"
        component={Menu}
      />
      <MenuNavigator.Screen
        name="Dishdetail"
        component={Dishdetail}
        options={{ headerTitle: 'Dish Detail' }}
      />
    </MenuNavigator.Navigator>
  );
}

但我很困惑如何将navigationOptions 功能转换为我的代码。因为他们的docs 没有告诉我如何将我的options 对象转换成一个函数来引入navigation 属性？

另一件事是他使用drawerIcon，

const MainNavigator = createDrawerNavigator(
  {
      navigationOptions: {
        drawerLabel: 'Login',
        drawerIcon: ({ tintColor }) => (
          <Icon
            name="sign-in"
            type="font-awesome"
            size={24}
            color={tintColor}
          />
        ),
      }
...

但我在抽屉导航docs 中没有找到任何相关的drawerIcon
如果有人帮助我解决这个问题，我衷心感谢。

【问题讨论】：

标签： react-native react-native-navigation react-navigation-stack

【解决方案1】：

首先，options 属性可用于配置导航器内的各个屏幕。而headerLeft 是一个函数，它返回一个 React 元素以显示在标题的左侧。使用函数时，它会在呈现时接收多个参数（onPress、label、labelStyle 等 - 请查看 types.tsx 以获取完整列表）。

options = {
    ({
        navigation
    }) => ({
        headerLeft: () => ( <
            Icon name = 'menu'
            size = {
                24
            }
            color = 'white'
            onPress = {
                () =>
                navigation.toggleDrawer()
            }
            />
        )

    })
}

对于drawerIcon 使用：

options = {
    {
        drawerIcon: ({
            tintColor
        }) => ( <
            Icon name = 'home'
            type = 'font-awesome'
            size = {
                24
            }
            color = {
                tintColor
            }
            />
        )
    }
}

【讨论】：