React Native Iconic 项目教程
1、项目的目录结构及介绍
react-native-iconic/
├── android/
│ ├── app/
│ ├── build.gradle
│ ├── gradle.properties
│ ├── settings.gradle
│ └── ...
├── ios/
│ ├── ReactNativeIconic/
│ ├── ReactNativeIconic.xcodeproj/
│ ├── ReactNativeIconic.xcworkspace/
│ └── ...
├── scripts/
│ ├── build.sh
│ ├── deploy.sh
│ └── ...
├── src/
│ ├── components/
│ ├── index.js
│ └── ...
├── .gitignore
├── .prettierignore
├── LICENSE
├── README.md
├── package.json
├── tsconfig.json
└── yarn.lock
目录结构介绍
android/
: 包含Android项目的所有文件和配置。ios/
: 包含iOS项目的所有文件和配置。scripts/
: 包含项目的构建和部署脚本。src/
: 包含项目的主要源代码文件,包括组件和入口文件。.gitignore
: 指定Git版本控制系统忽略的文件和目录。.prettierignore
: 指定Prettier代码格式化工具忽略的文件和目录。LICENSE
: 项目的开源许可证。README.md
: 项目的说明文档。package.json
: 项目的依赖和脚本配置文件。tsconfig.json
: TypeScript配置文件。yarn.lock
: Yarn包管理器的锁定文件。
2、项目的启动文件介绍
入口文件
项目的入口文件是 src/index.js
,它负责导出项目的主要组件和功能。
import { AnnotationDots } from './components/AnnotationDots';
export const Icon = () => <AnnotationDots />;
启动流程
- 安装依赖:
npm install
或yarn install
- 链接原生模块:
react-native link react-native-iconic
- 启动项目:
react-native run-android
或react-native run-ios
3、项目的配置文件介绍
package.json
package.json
文件包含了项目的依赖、脚本和其他元数据。
{
"name": "react-native-iconic",
"version": "1.0.0",
"description": "React Native - Native Animated Icons with different states",
"main": "src/index.js",
"scripts": {
"start": "react-native start",
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint ."
},
"dependencies": {
"react": "^17.0.2",
"react-native": "^0.64.2",
"react-native-svg": "^12.1.1"
},
"devDependencies": {
"eslint": "^7.29.0",
"prettier": "^2.3.2"
},
"license": "Apache-2.0"
}
tsconfig.json
tsconfig.json
文件是TypeScript的配置文件,用于指定编译选项。
{
"compilerOptions": {
"target": "esnext",
"module": "commonjs",
"allowJs": true,
"checkJs": true,
"jsx": "react-native",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": ["src"]
}
android/build.gradle
android/build.gradle
文件是Android项目的构建配置文件。
buildscript {
repositories {
google()
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:4.2.1'
}
}
allprojects {
repositories {
mavenLocal()
google()
jcenter()