如何用React Native Share Extension在10分钟内构建iOS分享扩展
React Native Share Extension是一个强大的工具,它允许开发者利用React Native作为引擎来驱动分享扩展功能。通过这个工具,你可以快速为iOS应用添加分享扩展,让用户能够方便地将内容分享到你的应用中。本文将详细介绍如何在10分钟内完成iOS分享扩展的构建。
准备工作
首先,你需要确保已经安装了Node.js和React Native开发环境。如果还没有安装,可以参考React Native官方文档进行安装。然后,通过以下命令克隆项目仓库:
git clone https://gitcode.com/gh_mirrors/re/react-native-share-extension
进入项目目录后,安装依赖:
cd react-native-share-extension
npm install
创建分享扩展目标
打开Xcode,加载项目中的examples/Sample1/ios/Sample1.xcodeproj文件。在Xcode中,选择项目的主目标,然后点击"Add Target"按钮。
在弹出的模板选择窗口中,选择"Application Extension"下的"Share Extension",然后点击"Next"。
在接下来的窗口中,填写产品名称为"MyShareEx",组织名称和组织标识符可以根据你的实际情况填写,语言选择"Objective-C",项目选择"Sample1",嵌入应用选择"Sample1",然后点击"Finish"。
配置分享扩展文件
创建完成后,Xcode会自动生成一些文件。我们需要对这些文件进行一些修改。首先,打开MyShareEx目录下的ShareViewController.h文件,确保其内容正确。
然后,右键点击MyShareEx目录,选择"New File..."。
在模板选择窗口中,选择"Objective-C File",然后点击"Next"。
文件名称填写为"MyShareEx.m",文件类型选择"Empty File",然后点击"Next",最后点击"Create"。
打开MainInterface.storyboard文件,在右侧的属性面板中,将"Custom Class"的"Class"设置为"ShareViewController"。
配置构建设置
选择MyShareEx目标,切换到"Build Settings"选项卡,搜索"Header Search Paths"。
双击"Header Search Paths"的值,添加以下路径:
$(SRCROOT)/../node_modules/react-native-share-extension/ios
并确保勾选"recursive"选项。
搜索"Other Linker Flags",添加-ObjC和-lc++。
切换到"Build Phases"选项卡,点击"Link Binary With Libraries",然后点击"+"按钮,添加以下库:
- libRCTActionSheet.a
- libRCTGeolocation.a
- libRCTImage.a
- libRCTLinking.a
- libRCTNetwork.a
- libRCTSettings.a
- libRCTText.a
- libRCTVibration.a
- libRCTWebSocket.a
- libReact.a
- libReactNativeShareExtension.a
配置Info.plist
打开MyShareEx目录下的Info.plist文件,添加"App Transport Security Settings"字典,并在其中添加"Allow Arbitrary Loads"键,值设置为"YES"。
添加运行脚本
切换到"Build Phases"选项卡,点击"+"按钮,选择"New Run Script Phase"。
在脚本编辑框中输入以下内容:
export NODE_BINARY=node
../node_modules/react-native/packager/react-native-xcode.sh
测试分享扩展
至此,iOS分享扩展的构建已经完成。你可以运行应用,然后在其他应用中点击分享按钮,应该能够看到"MyShareEx"分享选项。选择该选项,即可打开你构建的分享扩展界面。
通过React Native Share Extension,你可以快速构建功能强大的iOS分享扩展,为你的应用增加更多的用户交互方式。希望本文能够帮助你在短时间内完成分享扩展的开发。
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考


















