React Native Share Local
shareLocal封装了IOS系统原生的分享组件。
使用这个组件不需要集成微信、QQ等第三方服务的sdk,也不需要申请appke 只要按照下面的方法就可以调用
Installation
run npm install react-native-share-local --save
Automatically link
run react-native link react-native-share-local
Manually link
iOS (via Cocoa Pods)
Add the following line to your build targets in your Podfile
pod 'RNShareLocal', :path => '../node_modules/react-native-share-local'
Then run pod install
IOS (without Cocoa Pods)
- In XCode, in the project navigator, right click
Libraries
➜Add Files to [your project's name]
- add
./node_modules/react-native-share-local/IOS/RNShareLocal.xcodeproj
- In the XCode project navigator, select your project, select the
Build Phases
tab and in theLink Binary With Libraries
section add libRNShareLocal.a
Android
- in android/app/build.gradle:
dependencies { ... compile "com.facebook.react:react-native:+" // From node_modules+ compile project(':react-native-share-local')}
- in
android/settings.gradle
:
...include ':app'+ include ':react-native-share-local'+ project(':react-native-share-local').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-share-local/android')
With React Native 0.29+
- in
MainApplication.java
:
+ import com.kmlidc.RNShareLocal.RNShareLocal; public class MainApplication extends Application implements ReactApplication { //...... @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList(+ new RNShareLocal(), new MainReactPackage() ); } ...... }
With older versions of React Native:
- in
MainActivity.java
:
+ import com.kmlidc.RNShareLocal.RNShareLocal; public class MainActivity extends ReactActivity { ...... @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList(+ new RNShareLocal(), new MainReactPackage() ); } }
(Thanks to @chirag04 for writing the instructions)
Windows
- Open the solution in Visual Studio for your Windows apps
- right click your in the Explorer and click Add > Existing Project...
- Navigate to
./<app-name>/node_modules/react-native-share-local/windows/RNShareLocal
and addRNShareLocal.csproj
- this time right click on your React Native Windows app under your solutions directory and click Add > Reference...
- check the
RNShareLocal
you just added and press ok - open up
MainPage.cs
for your app and edit the file like so:
+ using RNShareLocal;...... get { return new List<IReactPackage> { new MainReactPackage(),+ new RNShareLocalPackage(), }; }
(Thanks to @josephan for writing the instructions)
API
shareMessage(option)
普通分享shareLink(option)
分享网址sharePictures(option)
分享多图
Example
first import shareLocal
shareMessage(option)
IOS
<Text style=styleswelcome onPress={ var option= text:"普通分享文字" image:"http://img.gemejo.com/product/8c/099/cf53b3a6008136ef0882197d5f5.jpg" { if!error } ; ;}> 普通分享</Text>
Android
<Text style=styleswelcome onPress={ }> 普通分享</Text>
shareLink(option)
IOS
<Text style=styleswelcome onPress={ var option= title:"分享网址标题" icon:"http://img.gemejo.com/product/8c/099/cf53b3a6008136ef0882197d5f5.jpg" link:"http://www.baidu.com" { if!error } ; ;}> 分享网址</Text>
Android
<Text style=styleswelcome onPress={ }> 分享连接地址</Text>
sharePictures(option)
最多可分享九张图片,超过的不显示
IOS
<Text style=styleswelcome onPress={ var images = "http://img.gemejo.com/product/8c/099/cf53b3a6008136ef0882197d5f5.jpg" "http://img.gemejo.com/product/45/1f0/f2f5067b718a01ef30abf738100.jpg" ; var option= imagesUrl:images { if!error } ;}> 分享多图</Text>
Android
<Text style=styleswelcome onPress={ }> 分享多张图片</Text>
补充说明
分享过程中如果有图片,会先下载完成图片之后再弹出分享菜单。建议增加网络加载图标,然后通过回调关闭加载图标。
excluded: 'UIActivityTypeMessage' 'UIActivityTypePostToFacebook' 'UIActivityTypePostToTwitter' 'UIActivityTypePostToWeibo' 'UIActivityTypeMail' 'UIActivityTypePrint' 'UIActivityTypeCopyToPasteboard' 'UIActivityTypeAssignToContact' 'UIActivityTypeSaveToCameraRoll' 'UIActivityTypeAddToReadingList' 'UIActivityTypePostToFlickr' 'UIActivityTypePostToVimeo' 'UIActivityTypePostToTencentWeibo' 'UIActivityTypeAirDrop' 'UIActivityTypeOpenInIBooks'