一，新建專案

npx react-native init ximalaya --template react-native-template-typescript

二，多環境配置

在android和ios的開發中，無法使用proscess.env.NODE_ENV的方式區分環境，需要使用一個包來實作：
react-native-config
官網地址：
https://js.coach/package/react-native-config

在這里插入圖片描述
注意，修改了buid.gradle檔案后需要重新運行專案才能生效，

三，絕對路徑配置

主要是為了解決檔案層次過深，使用相對路徑一級一級尋找太過麻煩的問題，
使用的包：
babel-plugin-module-resolver
官網：https://www.npmjs.com/package/babel-plugin-module-resolver
babel.config.js檔案：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver', //對這個插件的配置
      {
        root: ['./src'], //從這個目錄開始配置
        alias: {
          //使用對應的識別符號來映射對應的路徑
          '@/utils': './src/utils',
          '@/pages': './src/pages',
          '@/navigator': './src/navigator',
          '@/models': './src/models',
          '@/config': './src/config',
          '@/components': './src/components',
          '@/assets': './src/assets',
        },
      },
    ],
  ],
};

在這里插入圖片描述
這樣實際使用的時候：就可以直接使用自己配置好的映射識別符號路徑來完成了：

但是注意到頁面雖然顯示正確，說明按照這個路徑已經正確地引入模塊了，但是編輯器依舊報錯，這是因為ts還不識別這個模塊路徑的寫法，
需要在tsconfig.json中進行配置，
在這里插入圖片描述

    "baseUrl": "./src",                       /* Base directory to resolve non-absolute module names. */
    "paths": {
      "@/assets/*":["assets/*"],   //表示使用@/assets/來取代./src/assets/
      "@/components/*":["components/*"],
      "@/config/*":["config/*"],
      "@/navigator/*":["navigator/*"],
      "@/models/*":["models/*"],
      "@/pages/*":["pages/*"],
      "@/utils/*":["utils/*"],
    },

這時候，按住ctrl+滑鼠左鍵點擊，甚至可以直接跳轉到該檔案：
在這里插入圖片描述

四，介面檔案

1，原因分析

平時開發程序中，因為是前后端分離的，有時前端自己mock資料寫完之后，發現后端給的介面，不一致，就需要額外的作業量來修改，

2,下載安裝mongodb,node我已經安裝好了，就不安裝了

官網地址：https://www.mongodb.com/try/download/community

3，接下來進行Yapi的內網部署

官網：https://hellosean1025.github.io/yapi/devops/index.html

npm install -g yapi-cli --registry https://registry.npm.taobao.org

在這里插入圖片描述

 初始化管理員賬號成功,賬號名："admin@admin.com"，密碼："ymfe.org"

部署成功，請切換到部署目錄，輸入： "node vendors/server/app.js" 指令啟動服務器, 然后在瀏覽器打開 http://127.0.0.1:3001  訪問

登陸賬號和密碼就是上面生成的，注冊登陸：
在這里插入圖片描述

4，yapi的基本使用

在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/278893.html

標籤：其他

上一篇：好不容易撐到了位元組跳動Android三面，卡在了底層實作原理！

下一篇：Android實作自動點擊 - 無障礙服務

react native+typescript創建移動端專案-（慕課網喜馬拉雅專案筆記）-（一，專案的初始化配置）