React Native集成react-calendar报Can't find variable: Intl错误

你当前安装的react-calendar是面向Web端React开发的组件，本身依赖浏览器环境自带的Intl国际化API，内部实现也使用了div这类Web DOM元素，无法直接在React Native运行环境中执行：React Native的JS运行时默认不提供完整的浏览器Web API，也无法识别Web端的DOM标签，所以会抛出Can't find variable: Intl的错误，报错栈中出现的div节点渲染记录也能佐证这个问题。

• 优先选择：替换为React Native生态适配的日历组件
  这是成本最低、稳定性最高的方案，直接卸载不兼容的Web端组件，安装RN生态专用的日历组件即可：
  1. 卸载现有不兼容组件：执行命令yarn remove react-calendar
  2. 安装RN端适配的日历类组件，可选的成熟方案包括react-native-calendars、@react-native-community/datetimepicker等，以react-native-calendars为例，执行安装命令yarn add react-native-calendars
  3. 按照对应组件的使用说明引入业务代码即可，不会再出现API缺失、DOM不兼容类的报错。
• 特殊场景方案：强制兼容Web版react-calendar
  如果你因为业务逻辑强绑定必须使用当前安装的react-calendar，需要做两层兼容配置，该方案改造成本高、后续易出现其他兼容问题，非必要不推荐：
  1. 补齐缺失的Intl API：安装polyfill包yarn add intl，在项目入口文件（通常是根目录的index.js）的最顶部引入依赖：

     import 'intl';
     // 若需要指定语言，额外引入对应语言包，以中文为例
     import 'intl/locale-data/jsonp/zh';
     

  2. 引入react-native-web依赖，将组件内部输出的Web DOM节点转换为React Native可识别的原生组件，同时需要配置babel打包规则对react-calendar的源码做转译。

内容的提问来源于stack exchange，提问作者Anthon Santhez