React Native SVG Transformer 使用教程

React Native SVG Transformer 使用教程

react-native-svg-transformerImport 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 项目的目录结构如下：

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

目录结构介绍

• __mocks__/: 包含用于 Jest 测试的 SVG 模拟文件。
• .editorconfig: 编辑器配置文件，用于统一代码风格。
• .gitignore: Git 忽略文件配置。
• .prettierignore: Prettier 忽略文件配置。
• CHANGELOG.md: 项目更新日志。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• index.js: 项目入口文件。
• package.json: 项目依赖和脚本配置。
• yarn.lock: Yarn 包管理器生成的锁定文件。

2. 项目的启动文件介绍

项目的启动文件是 index.js。这个文件是 React Native 项目的入口点，负责初始化应用并加载必要的模块。

index.js 文件内容

// index.js 文件内容示例
import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

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

启动文件介绍

• AppRegistry.registerComponent(appName, () => App): 注册应用的根组件，appName 是应用的名称，App 是应用的根组件。

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的依赖、脚本和其他配置信息。

{
  "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": {
    "@svgr/core": "^5.5.0",
    "@svgr/plugin-jsx": "^5.5.0",
    "@svgr/plugin-svgo": "^5.5.0",
    "jest": "^27.0.6"
  }
}

配置文件介绍

• scripts: 定义了项目的启动和测试脚本。
• dependencies: 项目的运行时依赖。
• devDependencies: 项目的开发依赖。

.editorconfig

.editorconfig 文件用于统一不同编辑器和 IDE 的代码风格。

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

.gitignore

.gitignore 文件用于指定 Git 忽略的文件和目录。

# 忽略的文件和目录示例
node_modules/
build/
.DS_Store

.prettierignore

.prettierignore 文件用于指定 Prettier 忽略的文件和目录。

# 忽略的文件和目录示例
node_modules/
build/

通过以上介绍，您可以更好地理解和使用 React Native SVG Transformer 项目。

react-native-svg-transformerImport 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