React Navigation源代码阅读：routers/validateScreenOptions.js

本文链接：https://blog.youkuaiyun.com/andy_zhang2007/article/details/80297223

本文介绍了一个用于验证导航屏幕选项有效性的机制，确保开发者不会使用已废弃的配置项，并提供了错误处理及修改建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

const deprecatedKeys = ['tabBar'];

/**
 * Make sure screen options returned by the `getScreenOption`
 * are valid
 * 
 * 确保由 getScreenOption 返回的参数有效
 */
export default (screenOptions, route) => {
  const keys = Object.keys(screenOptions);

  const deprecatedKey = keys.find(key => deprecatedKeys.includes(key));

  // screenOptions.title 不能定义为 function，否则抛出错误
  if (typeof screenOptions.title === 'function') {
    throw new Error(
      [
        `\`title\` cannot be defined as a function in navigation options for \`${
          route.routeName
        }\` screen. \n`,
        'Try replacing the following:',
        '{',
        '    title: ({ state }) => state...',
        '}',
        '',
        'with:',
        '({ navigation }) => ({',
        '    title: navigation.state...',
        '})',
      ].join('\n')
    );
  }

  // 对废弃的key tabBar 的错误提示和修改建议
  if (deprecatedKey && typeof screenOptions[deprecatedKey] === 'function') {
      // 如果废弃的key tabBar定义了，并且定义为一个 function,抛出错误，提示修改建议
    throw new Error(
      [
        `\`${deprecatedKey}\` cannot be defined as a function in navigation options for \`${
          route.routeName
        }\` screen. \n`,
        'Try replacing the following:',
        '{',
        `    ${deprecatedKey}: ({ state }) => ({`,
        '         key: state...',
        '    })',
        '}',
        '',
        'with:',
        '({ navigation }) => ({',
        `    ${deprecatedKey}Key: navigation.state...`,
        '})',
      ].join('\n')
    );
  }

  if (deprecatedKey && typeof screenOptions[deprecatedKey] === 'object') {
      // 如果废弃的key tabBar定义了，并且定义为一个 object,抛出错误，提示修改建议
    throw new Error(
      [
        `Invalid key \`${deprecatedKey}\` defined in navigation options for \`${
          route.routeName
        }\` screen.`,
        '\n',
        'Try replacing the following navigation options:',
        '{',
        `    ${deprecatedKey}: {`,
        ...Object.keys(screenOptions[deprecatedKey]).map(
          key => `        ${key}: ...,`
        ),
        '    },',
        '}',
        '\n',
        'with:',
        '{',
        ...Object.keys(screenOptions[deprecatedKey]).map(
          key =>
            `    ${deprecatedKey + key[0].toUpperCase() + key.slice(1)}: ...,`
        ),
        '}',
      ].join('\n')
    );
  }
};