项目开工分析

环境搭建 （相关环境版本）

环境搭建

方案

采用ReactNative + TypeScript开发App

环境问题

大多数公司采用多环境开发，提供了react-native-config 第三方库。支持配置多环境url
工程下执行

yarn add react-native-config
# 或
npm install react-native-config

# 添加后需要pod install
cd iOS/
pod install

项目中新增 .env 文件，并配置。全局的请求连接

API_URL=https://myapi.com

App.js中调用，展示该连接

//引包
import Config from'react-native-config';

//调用
<View>
    <Text>{Config.API_URL}</Text>
</View>

image.png

要做什么？

底部tab切功能

• 首页
• 我听
• 播放
• 发现
• 账户

项目分类，基础框架文件夹分类

创建目录文件夹

• src
  • assets
  • config
  • models
  • pages
  • navigator
  • components
  • utils

绝对路径配置

• babel-plugin-module-resolver 插件

# 添加插件
yarn add 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',
          '@/models': './src/models',
          '@/navigator': './src/navigator',
          '@/config': './src/config',
          '@/components': './src/components',
          '@/assets': './src/assets',
        },
      },
    ],
  ],
};

• 配置txconfig.json 路径索引 baseUrl, paths

    //设置 ./文件路径
    "baseUrl": "./src",                       /* Base directory to resolve non-absolute module names. */
    "paths": {
      "@/assets/*" :["assets/*"],
      "@/components/*" :["components/*"],
      "@/config/*" :["config/*"],
      "@/models/*" :["models/*"],
      "@/navigator/*" :["navigator/*"],
      "@/pages/*" :["pages/*"],
      "@/utils/*" :["utils/*"]
    },     

路径分完了，可以开起下一步咯~~~
ps: 待完善，一步一个脚印！up