React Native SVG Transformer 项目教程

蒋素萍Marilyn

于 2024-05-29 09:41:08 发布

阅读量525

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00072/article/details/139285369

React Native SVG Transformer 项目教程

react-native-svg-transformer Import SVG files in your React Native project the same way that you would in a Web application. 项目地址: https://gitcode.com/gh_mirrors/re/react-native-svg-transformer

1. 项目目录结构及介绍

react-native-svg-transformer/
├── expo/
│   └── ...
├── images/
│   └── ...
├── react-native/
│   └── ...
├── .editorconfig
├── .gitignore
├── .prettierignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── index.js
├── package.json
└── yarn.lock

目录结构介绍

expo/: 包含与 Expo 相关的文件和配置。
images/: 包含项目中使用的图片资源。
react-native/: 包含与 React Native 相关的文件和配置。
.editorconfig: 编辑器配置文件，用于统一代码风格。
.gitignore: Git 忽略文件，指定哪些文件和目录不需要被 Git 管理。
.prettierignore: Prettier 忽略文件，指定哪些文件不需要被 Prettier 格式化。
CHANGELOG.md: 项目更新日志，记录每个版本的变更内容。
LICENSE: 项目许可证文件，说明项目的开源许可类型。
README.md: 项目说明文件，包含项目的介绍、使用方法和配置说明。
index.js: 项目的入口文件，通常是启动文件。
package.json: 项目的配置文件，包含项目的依赖、脚本和元数据。
yarn.lock: Yarn 锁定文件，确保依赖版本的一致性。

2. 项目启动文件介绍

`index.js`

index.js 是 React Native 项目的入口文件，通常包含以下内容：

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

文件介绍

AppRegistry: React Native 的核心模块，用于注册应用程序的根组件。
App: 应用程序的根组件，通常是一个 React 组件。
app.json: 包含应用程序的元数据，如名称、版本等。

3. 项目的配置文件介绍

`package.json`

package.json 是 Node.js 项目的配置文件，包含项目的依赖、脚本和元数据。以下是一些关键配置项：

{
  "name": "react-native-svg-transformer",
  "version": "1.0.0",
  "scripts": {
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "react": "17.0.2",
    "react-native": "0.64.2",
    "react-native-svg": "^12.1.1"
  },
  "devDependencies": {
    "react-native-svg-transformer": "^0.14.3"
  }
}

配置项介绍

name: 项目的名称。
version: 项目的版本号。
scripts: 定义项目的脚本命令，如 start 用于启动项目，test 用于运行测试。
dependencies: 项目的生产环境依赖。
devDependencies: 项目的开发环境依赖。

`metro.config.js`

metro.config.js 是 React Native 项目的打包配置文件，用于配置 Metro Bundler。以下是一个示例配置：

const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer')
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg']
    }
  };
})();