RN 0.63 版本安装 AntDesign 爬坑记录

RN 0.63 版本安装 AntDesign 爬坑记录

环境配置参考RN文档即可

Step

• 初始化项目

  npx react-native init ProjectName

• 引进AntDesign

  cd ProjectName

  npm install @ant-design/react-native --save

• 链接字体图片

  react-native link @ant-design/icons-react-native

  这时可能报错显示说没有icons这个库，这是因为在package.json 文件中没有添加依赖，可通过添加依赖或重新下载--save,建议重新下载

  npm install @ant-design/icons-react-native --save

  • 运行项目

    yarn ios or npx react-native run-ios

    运行后，引入antDesign库中的组件后，写入自己的代码，可能会报错如下：

    Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)

    然后，关闭终端，重启(yarn ios)

    • 若是引用的是button简单的组件可能没有问题，但是若引入的是时间选择器，可能会报错，提示某些模块未安装，此时按照他所需的组件一步一步安装即可，每次安装后可以进入ios文件夹pod后再启动项目，我本地安装共安装了6了组件：

      @react-native-community/viewpager

      @react-native-community/slider

      @react-native-community/segmented-control

      @react-native-community/cameraroll

      @react-native-community/async-storage

      @react-native-community/picker

      npm install @react-native-community/picker --save

      cd ios && pod install && cd ../ && yarn ios

      按照上述安装步骤，并按照错误提示模块进行安装，直到不再提示还有未安装的模块

      • • 到这里基本就可以了，但是可能会提示字体找不到，错误如下：

          react native: Unrecognized font family 'antoutline'

          莫慌，此时需要打开xcode编辑器，导入相关字体即可

          • 使用xcode打开ios目录下 xxx.xcodeproj 文件

          • 然后回到项目根目录下找到 node_modules/@ant-design/icons-react-native/fonts 目录

          • 不出意外该目录下应该有 antfill.ttf 和 antoutline.ttf 两个文件

          • 将这连个文件拖进xcode打开的项目目录

          　　

          • 按照上图选择后，双击 Info.plist 文件

          • 添加Key “ Fonts provided by application ”

          • 然后在该Key下添加两个元素，并将导入的两个字体文件名作为value值写入，如下图

            

          • 添加之后保存，重新运行即可

            cd ios && pod install && cd ../ && yarn ios

          • 按照上述步骤安装之后，就可以测试 AntDesign 下面的各种组件了。

           

          最后祝你搬砖愉快