React Native Image Crop Picker 使用教程

1. 项目的目录结构及介绍

React Native Image Crop Picker 项目的目录结构如下：

react-native-image-crop-picker/
├── android/
│   ├── app/
│   ├── build.gradle
│   ├── gradle/
│   ├── gradle.properties
│   ├── gradlew
│   ├── gradlew.bat
│   ├── settings.gradle
├── ios/
│   ├── ReactNativeImageCropPicker/
│   ├── ReactNativeImageCropPicker.xcodeproj/
│   ├── ReactNativeImageCropPicker.xcworkspace/
│   ├── Podfile
│   ├── Podfile.lock
│   ├── Pods/
├── src/
│   ├── index.js
│   ├── picker/
│   ├── options.js
│   ├── promise.js
│   ├── resolveAssetSource.js
│   ├── utils.js
├── .gitignore
├── .npmignore
├── .prettierrc
├── .travis.yml
├── LICENSE
├── README.md
├── package.json
├── yarn.lock

目录结构介绍

• android/：包含 Android 项目的所有文件和配置。
• ios/：包含 iOS 项目的所有文件和配置。
• src/：包含库的主要源代码文件。
  • index.js：库的入口文件。
  • picker/：包含图像选择器的实现。
  • options.js：包含配置选项的处理。
  • promise.js：包含 Promise 的处理。
  • resolveAssetSource.js：包含资源解析的处理。
  • utils.js：包含工具函数。
• .gitignore：Git 忽略文件配置。
• .npmignore：NPM 忽略文件配置。
• .prettierrc：Prettier 代码格式化配置。
• .travis.yml：Travis CI 配置文件。
• LICENSE：项目许可证。
• README.md：项目说明文档。
• package.json：项目依赖和脚本配置。
• yarn.lock：Yarn 依赖锁定文件。

2. 项目的启动文件介绍

项目的启动文件是 src/index.js，它是库的入口文件，负责导出库的主要功能。

import ImagePicker from './picker';

export default ImagePicker;

启动文件介绍

• src/index.js：导出 ImagePicker 模块，使得用户可以通过 import ImagePicker from 'react-native-image-crop-picker' 来使用库。

3. 项目的配置文件介绍

项目的配置文件主要包括 package.json 和 android/app/build.gradle、ios/Podfile。

package.json

package.json 文件包含了项目的依赖、脚本和其他元数据。

{
  "name": "react-native-image-crop-picker",
  "version": "0.37.3",
  "description": "iOS/Android image picker with support for camera, video, configurable compression, multiple images and cropping",
  "main": "src/index.js",
  "scripts": {
    "test": "jest",
    "lint": "eslint ."
  },
  "keywords": [
    "react-native",
    "image",
    "picker",
    "crop",
    "cropping",
    "multiple",
    "camera",
    "video",
    "compression"
  ],
  "author": "Ivan Pusic",
  "license": "MIT",
  "peerDependencies": {
    "react-native": ">=0.60.0"
  },
  "devDependencies": {
    "eslint": "^7.0.0",
    "jest": "^26.0.1",
    "react-native": "^0.63.0"
  }
}

android/app/build.gradle

android/app/build.gradle 文件包含了 Android 项目的构建配置。

apply plugin: 'com.android.library'

android {
  compileSdkVersion 33

  defaultConfig {
    minSdkVersion 16
    targetSdkVersion 33