【亲测免费】 React Native WebRTC 项目教程

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

React Native WebRTC 项目的目录结构如下：

react-native-webrtc/
├── android/
├── ios/
├── js/
├── lib/
├── src/
├── .gitignore
├── .npmignore
├── .prettierrc
├── .travis.yml
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── package.json
└── yarn.lock

目录介绍：

• android/: 包含 Android 平台相关的代码和配置文件。
• ios/: 包含 iOS 平台相关的代码和配置文件。
• js/: 包含 JavaScript 代码，用于处理 WebRTC 逻辑。
• lib/: 包含编译后的库文件。
• src/: 包含源代码文件。
• .gitignore: 指定 Git 版本控制系统忽略的文件和目录。
• .npmignore: 指定 npm 包发布时忽略的文件和目录。
• .prettierrc: 配置代码格式化工具 Prettier。
• .travis.yml: 配置 Travis CI 持续集成服务。
• CONTRIBUTING.md: 贡献指南。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• package.json: 项目依赖和脚本配置文件。
• yarn.lock: Yarn 包管理器的锁文件。

2. 项目的启动文件介绍

React Native WebRTC 项目的启动文件主要位于 js/ 目录下。以下是一些关键的启动文件：

• js/index.js: 项目的入口文件，负责初始化 WebRTC 模块并导出相关功能。

// js/index.js
import { NativeModules } from 'react-native';
import { RTCPeerConnection, RTCSessionDescription, RTCIceCandidate } from 'react-native-webrtc';

export { RTCPeerConnection, RTCSessionDescription, RTCIceCandidate };

3. 项目的配置文件介绍

React Native WebRTC 项目的配置文件主要包括：

• package.json: 项目依赖和脚本配置文件。

{
  "name": "react-native-webrtc",
  "version": "1.92.0",
  "description": "The WebRTC module for React Native",
  "main": "js/index.js",
  "scripts": {
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "base64-js": "^1.3.1",
    "event-target-shim": "^5.0.1",
    "prop-types": "^15.7.2",
    "uuid": "^3.3.3"
  },
  "devDependencies": {
    "eslint": "^6.8.0",
    "jest": "^25.1.0",
    "react": "^16.13.1",
    "react-native": "^0.63.0"
  },
  "peerDependencies": {
    "react": "^16.13.1",
    "react-native": "^0.63.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

• android/build.gradle: Android 项目的构建配置文件。

// android/build.gradle
buildscript {
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.5.3'
    }
}

allprojects {
    repositories {
        google()
        jcenter()
        maven {
            url 'https://maven.google.com'
        }
    }
}

• ios/Podfile: iOS 项目的依赖管理配置文件。

# ios/Podfile
platform :ios, '9.0'

target 'ReactNativeWebRTC' do
  pod 'React', :path => '../node_modules/react-native'
  pod 'react-native-webrtc', :path => '../'
end

以上是 React Native WebRTC 项目的主要目录结构、启动文件和配置