React Native VideoEditor SDK 教程

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

React Native VideoEditor SDK 的目录结构如下：

vesdk-react-native/
├── android/
│   ├── app/
│   │   ├── src/
│   │   ├── build/
│   │   └── libs/
│   ├── build.gradle
│   └── gradle/
├── ios/
│   ├── ImglyKit/
│   ├── VideoEditorSDK/
│   └── build/
├── .gitattributes
├── .gitignore
├── .npmignore
├── .watchmanconfig
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── RNVideoEditorSDK.podspec
├── configuration.ts
├── index.d.ts
├── index.js
└── package.json

介绍

• android/: 包含 Android 平台的构建脚本和源代码。
• ios/: 包含 iOS 平台的构建脚本和源代码，包括框架和资源。
• .gitattributes: 指定 Git 仓库的属性。
• .gitignore: 指定 Git 忽略的文件和目录。
• .npmignore: 指定 npm 忽略的文件和目录。
• .watchmanconfig: 配置 Watchman 监控文件系统变化的规则。
• CHANGELOG.md: 记录项目历史版本的更新和修改。
• LICENSE.md: 项目使用的许可证信息。
• README.md: 项目的基本信息和说明。
• RNVideoEditorSDK.podspec: iOS 平台使用的 CocoaPods 配置文件。
• configuration.ts: TypeScript 配置文件。
• index.d.ts: TypeScript 声明文件。
• index.js: JavaScript 入口文件。
• package.json: 项目依赖和配置。

2. 项目的启动文件介绍

项目的启动文件是 index.js，这是 JavaScript 的入口文件。以下是一个简单的示例：

import { VESDK, VideoEditorModal, Configuration } from 'react-native-videoeditorsdk';

// 自动解锁 VideoEditor SDK
VESDK.unlockWithLicense(require('./vesdk_license'));

// 打开视频编辑器
VESDK.openEditor(require('./video.mp4'));

在这个文件中，我们导入了必要的模块，解锁了 VideoEditor SDK，并打开了一个视频编辑器。

3. 项目的配置文件介绍

项目的配置文件包括 package.json 和 RNVideoEditorSDK.podspec。

package.json

package.json 是 Node.js 项目的主要配置文件，它包含了项目的名称、版本、描述、依赖等信息。以下是一个示例：

{
  "name": "react-native-videoeditorsdk",
  "version": "3.3.0",
  "description": "React Native module for VideoEditor SDK",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "react-native",
    "video",
    "editor",
    "sdk"
  ],
  "dependencies": {
    "react-native-imglysdk": "^2.0.1"
  },
  "peerDependencies": {
    "react": "^16.13.1",
    "react-native": "^0.60.0"
  },
  "devDependencies": {
    "@types/react": "^16.9.35",
    "@types/react-native": "^0.64.0"
  }
}

RNVideoEditorSDK.podspec

RNVideoEditorSDK.podspec 是 iOS 平台使用的 CocoaPods 配置文件，它指定了 iOS 项目的依赖和配置。以下是一个示例：

Pod::Spec.new do |spec|
  spec.name         = "RNVideoEditorSDK"
  spec.version      = "3.2.0"
  spec.summary      = "React Native VideoEditor SDK"
  spec.description  = <<-DESC
                       A longer description of RNVideoEditorSDK in Markdown format.
                       DESC
  spec.homepage     = "https://github.com/imgly/vesdk-react-native"
  spec.license      = { :type => "MIT", :file => "LICENSE" }
  spec.author       = { "Your Name" => "[e-mail]" }
  spec.platform     = :ios, "13.0"
  spec.source       = { :git => "https://github.com/imgly/vesdk-react-native.git", :tag => "#{spec.version}" }
  spec.source_files = "ios/ImglyKit/**/*.{h,m}"
  spec.exclude_files = "ios/ImglyKit/Classes/Exclude"
  spec.public_header_files = "ios/ImglyKit/**/*.h"

  spec.dependency "React"
  spec.dependency "VideoEditorSDK"
end

这个文件定义了 iOS 项目的基本信息、依赖和源文件。