React Native Share Extension 使用教程

React Native Share Extension 使用教程

react-native-share-extensionreact-native as an engine to drive share extension项目地址:https://gitcode.com/gh_mirrors/re/react-native-share-extension

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

react-native-share-extension/
├── android/
│   ├── app/
│   ├── build.gradle
│   ├── gradle.properties
│   ├── settings.gradle
│   └── ...
├── ios/
│   ├── ReactNativeShareExtension.xcodeproj
│   ├── ReactNativeShareExtension/
│   └── ...
├── src/
│   ├── index.js
│   ├── ShareExtension.js
│   └── ...
├── .gitignore
├── .npmignore
├── README.md
├── package.json
└── ...

• android/：包含Android项目的所有文件和配置。
• ios/：包含iOS项目的所有文件和配置。
• src/：包含React Native应用的主要源代码文件。
• .gitignore：指定Git版本控制系统忽略的文件和目录。
• .npmignore：指定npm包发布时忽略的文件和目录。
• README.md：项目的说明文档。
• package.json：项目的npm配置文件，包含依赖项和其他元数据。

2. 项目的启动文件介绍

src/index.js

这是React Native应用的入口文件。它负责初始化应用并加载主要的组件。

import { AppRegistry } from 'react-native';
import ShareExtension from './ShareExtension';

AppRegistry.registerComponent('ShareExtension', () => ShareExtension);

src/ShareExtension.js

这是Share Extension的主要组件文件。它负责处理分享的内容并显示UI。

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';

class ShareExtension extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Share Extension</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

export default ShareExtension;

3. 项目的配置文件介绍

package.json

这是npm的配置文件，包含了项目的依赖项、脚本和其他元数据。

{
  "name": "react-native-share-extension",
  "version": "1.0.0",
  "description": "React Native Share Extension",
  "main": "src/index.js",
  "scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-native": "^0.64.2"
  },
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/runtime": "^7.14.6",
    "babel-plugin-module-resolver": "^4.1.0",
    "metro-react-native-babel-preset": "^0.66.0"
  }
}

android/build.gradle

这是Android项目的Gradle配置文件，包含了项目的依赖项和其他构建配置。

buildscript {
    ext {
        buildToolsVersion = "30.0.2"
        minSdkVersion = 16
        compileSdkVersion = 30
        targetSdkVersion = 30
    }
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:4.2.1")
    }
}

allprojects {
    repositories {
        google()
        mavenCentral()
        maven { url 'https://www.jitpack.io' }
    }
}

ios/ReactNativeShareExtension.xcodeproj

这是iOS项目的Xcode配置文件，包含了项目的构建配置和其他设置

react-native-share-extensionreact-native as an engine to drive share extension项目地址:https://gitcode.com/gh_mirrors/re/react-native-share-extension