https://github.com/minooo/rn_one

My first react-native project
https://github.com/minooo/rn_one

Last synced: about 1 month ago
JSON representation

My first react-native project

• Host: GitHub
• URL: https://github.com/minooo/rn_one
• Owner: minooo
• License: mit
• Created: 2018-05-11T00:06:58.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-05-22T08:59:44.000Z (over 6 years ago)
• Last Synced: 2024-10-30T23:13:40.320Z (3 months ago)
• Language: JavaScript
• Size: 411 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# RN-ONE

My first react-native project

# 踩坑集锦

## icon 使用的最佳“实践”，结合 icomoon（自定义图标）

> 由于RN不支持多色图标，所以一律单色，多色的话就用png替代，也许支持多色图片，只是我还没发现

- 安装此包 `yarn add react-native-vector-icons`

- 将 iconmoon 中下载的文件 .json 文件保留，以及fonts 中的 .ttf 文件保留

- 参照 ./src/commponents/0-0-Icon 的用法

- 手动将 .ttf 文件放到 ./node_modules/react-native-vector-icons/Fonts 中

- 在 ./android/app/build.gradle 中添加如下配置

  ```

  ...

  project.ext.vectoricons = [

      iconFontNames: [ "dudu.ttf" ] // Name of the font files you want to copy

  ]

  apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

  ...

  ```

- 至于如何在 ios 中进行上面配置，参照 [这里](https://github.com/oblador/react-native-vector-icons#option-manually)

- 结束，这是一个比较”丑陋“的方案，希望以后能有更好的方式。

## `babel-plugin-module-resolver` 在RN的使用中总是出错

> 懒的吐槽这个了，简直就是陨石坑，还好终于找到一个比较靠谱的方法

- .babelrc 的配置

  ```

  {

    "presets": ["react-native"],

    "plugins": [

      "transform-decorators-legacy",

      [

        "import",

        {

          "libraryName": "antd-mobile"

        }

      ],

      [

        "module-resolver",

        {

          "cwd": "babelrc",

          "root": ["./src"],

          "alias": {

            "@components": "./src/components",

            "@utils": "./src/utils"

          },

          "extensions": [".js", ".ios.js", ".android.js"]

        }

      ]

    ]

  }

  ```

- 运行 `react-native run-android -- --reset-cache`