React Native 結合友盟實現分享

超人他不會飛發表於2018-12-17

前言

如今，分享已經是app必不可少的一項功能，前段時間在react native中實現了社會化分享的功能，在這裡記錄一下實現過程，希望可以幫到有需要的人。

此文章會記錄安卓和IOS 兩個平臺分別實現分享的步驟，內容可能會有點長，可根據需要檢視。

技術調研

在蒐羅了網上大部分 react native實現分享的技術文章中，大部分文章較為老舊，實現方式也跟原生app相仿，需要自己編寫大量的Object-C 以及java程式碼，對於純前端開發的人來說時間成本和難度有點高，有幸，在友盟官網上發現了有針對於react native的社會化分享sdk，研究了一番，可行，開始。

準備

這裡預設你已經搭建好react native的開發環境。

註冊友盟賬號

去友盟官網註冊賬號，建議使用公司郵箱。

關於開發者認證，暫時不需要企業認證可以免費試用大部分功能。

點選立即使用即可前往控制檯，首先要新建你的應用。

不同平臺的應用禁止使用相同的Appkey，需要分開註冊，應用名與實際應用名和包名無關，建議命名為應用名+平臺（iOS/Android)

目的是拿到AppKey。

下載SDK

在彈框選擇對應的分享平臺，本文只針對微信、QQ、新浪微博的精簡版說明。

在各大平臺註冊應用

關於申請的流程官網文件有介紹，有幾點需要注意：

各大平臺申請服務所需要等待的時間不等，通常是1-5天即可通過，申請的同時可以整合sdk。
新浪的開發者賬號申請比較麻煩，但也是最快可以拿到appkey的。

React native的整合

關於整合文件，友盟已經給出，按照官方文件的步驟整合即可，只不過整合完react native 的部分才算一小部分，大部分整合都需要按照ios和安卓平臺的文件分別整合，鑑於官方文件寫的雲裡霧裡，新手可直接參考我這裡的步驟。

友盟整合文件

React Native Android 整合

安卓整合比較麻煩，建議clone 官方示例demo對照設定。

初始化

用android studio 開啟你的Android目錄，

app目錄中新建libs資料夾，將下載的jar放入libs中。

首先需要新建一個資料夾來存放這些.java檔案，在你的專案如下目錄中新建 umeng資料夾：

拷貝common_android資料夾中的檔案拷貝到umeng資料夾:

然後再將對應平臺的橋接檔案拷入umeng資料夾：

注意：官方示例中橋接檔案的路徑預設是 com.umeng.soexample.invokenative,要修改成自己的路徑。

改為自己的路徑：

開啟MainApplication.java檔案，在new MainReactPackage()後新增一行 new DplusReactPackage();

 private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                new MainReactPackage(),
                new DplusReactPackage()
            );
        }
    };
複製程式碼

並在onCreate()中進行初始化：

 @Override
    public void onCreate() {
        super.onCreate();
        SoLoader.init(this, /* native exopackage */ false);
        RNUMConfigure.init(this, "59892f08310c9307b60023d0", "Umeng", UMConfigure.DEVICE_TYPE_PHONE,
            "669c30a9584623e70e8cd01b0381dcb4");
    }
複製程式碼

RNUMConfture.init介面一共五個引數，其中第一個引數為Context，第二個引數為友盟Appkey，第三個引數為channel，第四個引數為應用型別（手機或平板），第五個引數為push的secret（如果沒有使用push，可以為空）。

在友盟後臺註冊完app後即可把 android 的appkey填入。

至此，react native 的安卓工程配置已經完成，接下來要按照Android的 U-share文件整合。

Android 部分整合

官方文件說Android整合包含快速整合和手動整合，但是關於快速整合毛都沒講，我們使用手動整合。

匯入res 將 main 和platfroms資料夾下的res資源全部匯入工程中。 res下沒有相關目錄的話直接拷貝資料夾過去。

新增完畢：

微信

的回撥需要新建資料夾

在包名目錄下建立wxapi資料夾，新建檔案WXEntryActivity的activity.java

寫入以下內容（com.share.umeng要改成你的包路徑）:

package com.share.umeng;

import com.umeng.socialize.weixin.view.WXCallbackActivity;

public class WXEntryActivity extends WXCallbackActivity {

}
複製程式碼

QQ與新浪

QQ與新浪不需要新增Activity，但需要在MainActivity.java檔案中修改如下：

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "share";
    }
    
    // 新增以下程式碼
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        UMShareAPI.get(this).onActivityResult(requestCode, resultCode, data);
    }
}
複製程式碼

注意onActivityResult不可在fragment中實現，如果在fragment中呼叫登入或分享，需要在fragment依賴的Activity中實現。

配置Android Manifest XML

sdk中需要的Activity

新浪：

   <activity
        android:name="com.umeng.socialize.media.WBShareCallBackActivity"
        android:configChanges="keyboardHidden|orientation"
        android:theme="@android:style/Theme.Translucent.NoTitleBar"
        android:exported="false"
        >
    </activity>
    <activity android:name="com.sina.weibo.sdk.web.WeiboSdkWebActivity"
              android:configChanges="keyboardHidden|orientation"
              android:exported="false"
              android:windowSoftInputMode="adjustResize"
    >

    </activity>
    <activity
        android:theme="@android:style/Theme.Translucent.NoTitleBar.Fullscreen"
        android:launchMode="singleTask"
        android:name="com.sina.weibo.sdk.share.WbShareTransActivity">
        <intent-filter>
            <action android:name="com.sina.weibo.sdk.action.ACTION_SDK_REQ_ACTIVITY" />
            <category android:name="android.intent.category.DEFAULT" />
        </intent-filter>

    </activity>
複製程式碼

微信：

 <activity
            android:name=".wxapi.WXEntryActivity"
            android:configChanges="keyboardHidden|orientation|screenSize"
            android:exported="true"
            android:theme="@android:style/Theme.Translucent.NoTitleBar" />
複製程式碼

許可權新增

在AndroidManifest.xml中新增如下許可權:

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
複製程式碼

如果需要使用QQ純圖分享或避免其它平臺純圖分享的時候圖片不被壓縮，可以增加以下許可權：

  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>   
   <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
複製程式碼

Android6.0許可權適配

檢視你的build.gradle檔案，如果 targetSdkVersion小於或等於22，可以忽略這一步，如果大於或等於23，需要做許可權的動態申請：

if(Build.VERSION.SDK_INT>=23){
                  String[] mPermissionList = new String[]{Manifest.permission.WRITE_EXTERNAL_STORAGE,Manifest.permission.ACCESS_FINE_LOCATION,Manifest.permission.CALL_PHONE,Manifest.permission.READ_LOGS,Manifest.permission.READ_PHONE_STATE, Manifest.permission.READ_EXTERNAL_STORAGE,Manifest.permission.SET_DEBUG_APP,Manifest.permission.SYSTEM_ALERT_WINDOW,Manifest.permission.GET_ACCOUNTS,Manifest.permission.WRITE_APN_SETTINGS};
                  ActivityCompat.requestPermissions(this,mPermissionList,123);
              }
複製程式碼

其中123是requestcode，可以根據這個code判斷，使用者是否同意了授權。如果沒有同意，可以根據回撥進行相應處理：

@Override
public void onRequestPermissionsResult(int requestCode,
        String permissions[], int[] grantResults) {

}
複製程式碼

初始化設定

由於之前已經在在onCreate()方法中替換友盟的appkey，還需要替換各大平臺的Appkey 和 App Secret

開啟MainApplication.java檔案，在onCreate()方法後新增各平臺的appkey:

{
//豆瓣RENREN平臺目前只能在伺服器端配置
        PlatformConfig.setWeixin("wxdc1e388c3822c80b", "3baf1193c85774b3fd9d18447d76cab0");
        PlatformConfig.setSinaWeibo("3921700954", "04b48b094faeb16683c32669824ebdad", "http://sns.whalecloud.com");
        PlatformConfig.setQQZone("100424468", "c7394704798a158208a74ab60104f0ba");


    }
複製程式碼

簽名配置

將資料夾中的簽名檔案放入到工程中，一般是debug.keystore

如何生成簽名?

開啟build.gradle然後增加簽名檔案的密碼：

signingConfigs {
    debug {
        storeFile file('debug.keystore')
        storePassword "android"
        keyAlias "androiddebugkey"
        keyPassword "android"
    }
}
複製程式碼

然後在buildTypes中將這個signingConfigs配置進去，如下圖所示：

至此，android 部分的整合結束，更多高階功能請去參考官方文件。

React Native IOS 整合

ios整合文件

ios的整合也非分為手動整合和自動整合，自動整合使用Cocoapods。

通過 Cocoapods 方式整合請參考文件 Cocoapods整合分享SDK。

由於我之前是通過手動整合的，所以本文講解手動整合步驟，

但是對於ios來說更推薦使用 Cocoapods。

進入ios > 專案目錄，新建兩個資料夾UMReactBridge和UMComponent。
開啟之前下載的檔案，把share目錄中的最後所有檔案，拷入UMComponent中的新建資料夾UMShare中。

這裡有一個問題。通過選擇react native 下載的sdk包中ios目錄中缺少common部分的檔案，所以還需要去sdk下載中心去下載ios的sdk。

下載之後，將ios目錄下的common中的framework，拷入UMComponent中。

同時有兩個log相關的檔案，一併匯入，便於開發時可以在xcode中檢視詳細的日誌。

進入下載檔案的ReactNative目錄，找到common``share目錄中對應的ios平臺中的橋接.h ``.m檔案，全部拷貝至我們專案剛剛新建的UMReactBridge資料夾。

xcode中開啟工程目錄，右鍵黃色專案名Add Files to "xxx"，options中選中Create groups Copy items if needed找到我們新建的UMReactBridge和UMComponent，add新增。

在Other Linker Flags加入-ObjC ，注意不要寫為-Objc，注：-ObjC屬於連結庫必備引數，如果不加此項，會導致庫檔案無法被正確連結，SDK無法正常執行。

加入依賴系統庫

加入以下系統庫：

libsqlite3.tbd
CoreGraphics.framework
複製程式碼

日誌依賴庫：

Foundation.framework
複製程式碼

日誌詳細配置

第三方平臺庫新增（精簡版）: 新浪微博(精簡版)

Photos.framework

複製程式碼

第三方平臺配置

配置SSO白名單

如果你的應用使用瞭如SSO授權登入或跳轉到第三方分享功能，在iOS9/10下就需要增加一個可跳轉的白名單，即LSApplicationQueriesSchemes，否則將在SDK判斷是否跳轉時用到的canOpenURL時返回NO，進而只進行webview授權或授權/分享失敗。在專案中的info.plist中加入應用白名單，右鍵info.plist選擇source code開啟,請根據選擇的平臺對以下配置進行裁剪：


<key>LSApplicationQueriesSchemes</key>
<array>
    <!-- 微信 URL Scheme 白名單-->
    <string>wechat</string>
    <string>weixin</string>

    <!-- 新浪微博 URL Scheme 白名單-->
    <string>sinaweibohd</string>
    <string>sinaweibo</string>
    <string>sinaweibosso</string>
    <string>weibosdk</string>
    <string>weibosdk2.5</string>

    <!-- QQ、Qzone URL Scheme 白名單-->
    <string>mqqapi</string>
    <string>mqq</string>
    <string>mqqOpensdkSSoLogin</string>
    <string>mqqconnect</string>
    <string>mqqopensdkdataline</string>
    <string>mqqopensdkgrouptribeshare</string>
    <string>mqqopensdkfriend</string>
    <string>mqqopensdkapi</string>
    <string>mqqopensdkapiV2</string>
    <string>mqqopensdkapiV3</string>
    <string>mqqopensdkapiV4</string>
    <string>mqzoneopensdk</string>
    <string>wtloginmqq</string>
    <string>wtloginmqq2</string>
    <string>mqqwpa</string>
    <string>mqzone</string>
    <string>mqzonev2</string>
    <string>mqzoneshare</string>
    <string>wtloginqzone</string>
    <string>mqzonewx</string>
    <string>mqzoneopensdkapiV2</string>
    <string>mqzoneopensdkapi19</string>
    <string>mqzoneopensdkapi</string>
    <string>mqqbrowser</string>
    <string>mttbrowser</string>
    <string>tim</string>
    <string>timapi</string>
    <string>timopensdkfriend</string>
    <string>timwpa</string>
    <string>timgamebindinggroup</string>
    <string>timapiwallet</string>
    <string>timOpensdkSSoLogin</string>
    <string>wtlogintim</string>
    <string>timopensdkgrouptribeshare</string>
    <string>timopensdkapiV4</string>
    <string>timgamebindinggroup</string>
    <string>timopensdkdataline</string>
    <string>wtlogintimV1</string>
    <string>timapiV1</string>

    <!-- 支付寶 URL Scheme 白名單-->
    <string>alipay</string>
    <string>alipayshare</string>

    <!-- 釘釘 URL Scheme 白名單-->
      <string>dingtalk</string>
      <string>dingtalk-open</string>

    <!--Linkedin URL Scheme 白名單-->
    <string>linkedin</string>
    <string>linkedin-sdk2</string>
    <string>linkedin-sdk</string>

    <!-- 點點蟲 URL Scheme 白名單-->
    <string>laiwangsso</string>

    <!-- 易信 URL Scheme 白名單-->
    <string>yixin</string>
    <string>yixinopenapi</string>

    <!-- instagram URL Scheme 白名單-->
    <string>instagram</string>

    <!-- whatsapp URL Scheme 白名單-->
    <string>whatsapp</string>

    <!-- line URL Scheme 白名單-->
    <string>line</string>

    <!-- Facebook URL Scheme 白名單-->
    <string>fbapi</string>
    <string>fb-messenger-api</string>
    <string>fb-messenger-share-api</string>
    <string>fbauth2</string>
    <string>fbshareextension</string>

    <!-- Kakao URL Scheme 白名單-->  
    <!-- 注：以下第一個引數需替換為自己的kakao appkey--> 
    <!-- 格式為 kakao + "kakao appkey"-->    
    <string>kakaofa63a0b2356e923f3edd6512d531f546</string>
    <string>kakaokompassauth</string>
    <string>storykompassauth</string>
    <string>kakaolink</string>
    <string>kakaotalk-4.5.0</string>
    <string>kakaostory-2.9.0</string>

   <!-- pinterest URL Scheme 白名單-->  
    <string>pinterestsdk.v1</string>

   <!-- Tumblr URL Scheme 白名單-->  
    <string>tumblr</string>

   <!-- 印象筆記 -->
    <string>evernote</string>
    <string>en</string>
    <string>enx</string>
    <string>evernotecid</string>
    <string>evernotemsg</string>

   <!-- 有道雲筆記-->
    <string>youdaonote</string>
    <string>ynotedictfav</string>
    <string>com.youdao.note.todayViewNote</string>
    <string>ynotesharesdk</string>

   <!-- Google+-->
    <string>gplus</string>

   <!-- Pocket-->
    <string>pocket</string>
    <string>readitlater</string>
    <string>pocket-oauth-v1</string>
    <string>fb131450656879143</string>
    <string>en-readitlater-5776</string>
    <string>com.ideashower.ReadItLaterPro3</string>
    <string>com.ideashower.ReadItLaterPro</string>
    <string>com.ideashower.ReadItLaterProAlpha</string>
    <string>com.ideashower.ReadItLaterProEnterprise</string>

   <!-- VKontakte-->
    <string>vk</string>
    <string>vk-share</string>
    <string>vkauthorize</string>

   <!-- Twitter-->
    <string>twitter</string>
    <string>twitterauth</string>
</array>
複製程式碼

配置URL Scheme

URL Scheme是通過系統找到並跳轉對應app的一類設定，通過向專案中的info.plist檔案中加入URL types可使用第三方平臺所註冊的appkey資訊向系統註冊你的app，當跳轉到第三方應用授權或分享後，可直接跳轉回你的app。

部分規則：

微信：微信appKey wxdc1e388c3822c80b
QQ/Qzone：需要新增兩項URL Scheme： 1、"tencent"+騰訊QQ互聯應用appID 2、“QQ”+騰訊QQ互聯應用appID轉換成十六進位制（不足8位前面補0）如appID：100424468 1、tencent100424468 2、QQ05fc5b14

線上轉換

新浪微博： “wb”+新浪appKey wb3921700954

許可權配置

在 info.plist 檔案中配置相簿許可權:

    <key>NSPhotoLibraryUsageDescription</key>
    <string>App需要您的同意,才能訪問相簿</string>
複製程式碼

初始化設定

AppDelegate.m設定友盟appkey以及各個平臺的appkey和secret。

#import <UMShare/UMShare.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

    // UMConfigure 通用設定，請參考SDKs整合做統一初始化。
    // 以下僅列出U-Share初始化部分

    // U-Share 平臺設定
    [self configUSharePlatforms];
    [self confitUShareSettings];

    // Custom code

    return YES;
}

- (void)confitUShareSettings
{
    /*
     * 開啟圖片水印
     */
    //[UMSocialGlobal shareInstance].isUsingWaterMark = YES;

    /*
     * 關閉強制驗證https，可允許http圖片分享，但需要在info.plist設定安全域名
     <key>NSAppTransportSecurity</key>
     <dict>
     <key>NSAllowsArbitraryLoads</key>
     <true/>
     </dict>
     */
    //[UMSocialGlobal shareInstance].isUsingHttpsWhenShareContent = NO;

}

- (void)configUSharePlatforms
{
    /* 設定微信的appKey和appSecret */
    [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_WechatSession appKey:@"wxdc1e388c3822c80b" appSecret:@"3baf1193c85774b3fd9d18447d76cab0" redirectURL:@"http://mobile.umeng.com/social"];
    /*
     * 移除相應平臺的分享，如微信收藏
     */
    //[[UMSocialManager defaultManager] removePlatformProviderWithPlatformTypes:@[@(UMSocialPlatformType_WechatFavorite)]];

    /* 設定分享到QQ互聯的appID
     * U-Share SDK為了相容大部分平臺命名，統一用appKey和appSecret進行引數設定，而QQ平臺僅需將appID作為U-Share的appKey引數傳進即可。
    */
    [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_QQ appKey:@"1105821097"/*設定QQ平臺的appID*/  appSecret:nil redirectURL:@"http://mobile.umeng.com/social"];

    /* 設定新浪的appKey和appSecret */
    [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_Sina appKey:@"3921700954"  appSecret:@"04b48b094faeb16683c32669824ebdad" redirectURL:@"https://sns.whalecloud.com/sina2/callback"];

    /* 釘釘的appKey */
    [[UMSocialManager defaultManager] setPlaform: UMSocialPlatformType_DingDing appKey:@"dingoalmlnohc0wggfedpk" appSecret:nil redirectURL:nil];

    /* 支付寶的appKey */
    [[UMSocialManager defaultManager] setPlaform: UMSocialPlatformType_AlipaySession appKey:@"2015111700822536" appSecret:nil redirectURL:@"http://mobile.umeng.com/social"];


    /* 設定易信的appKey */
    [[UMSocialManager defaultManager] setPlaform: UMSocialPlatformType_YixinSession appKey:@"yx35664bdff4db42c2b7be1e29390c1a06" appSecret:nil redirectURL:@"http://mobile.umeng.com/social"];

    /* 設定點點蟲（原來往）的appKey和appSecret */
    [[UMSocialManager defaultManager] setPlaform: UMSocialPlatformType_LaiWangSession appKey:@"8112117817424282305" appSecret:@"9996ed5039e641658de7b83345fee6c9" redirectURL:@"http://mobile.umeng.com/social"];

    /* 設定領英的appKey和appSecret */
    [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_Linkedin appKey:@"81t5eiem37d2sc"  appSecret:@"7dgUXPLH8kA8WHMV" redirectURL:@"https://api.linkedin.com/v1/people"];

    /* 設定Twitter的appKey和appSecret */
    [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_Twitter appKey:@"fB5tvRpna1CKK97xZUslbxiet"  appSecret:@"YcbSvseLIwZ4hZg9YmgJPP5uWzd4zr6BpBKGZhf07zzh3oj62K" redirectURL:nil];

    /* 設定Facebook的appKey和UrlString */
    [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_Facebook appKey:@"506027402887373"  appSecret:nil redirectURL:@"http://www.umeng.com/social"];

    /* 設定Pinterest的appKey */
    [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_Pinterest appKey:@"4864546872699668063"  appSecret:nil redirectURL:nil];

    /* dropbox的appKey */
    [[UMSocialManager defaultManager] setPlaform: UMSocialPlatformType_DropBox appKey:@"k4pn9gdwygpy4av" appSecret:@"td28zkbyb9p49xu" redirectURL:@"https://mobile.umeng.com/social"];

    /* vk的appkey */
    [[UMSocialManager defaultManager]  setPlaform:UMSocialPlatformType_VKontakte appKey:@"5786123" appSecret:nil redirectURL:nil];

}

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
  {
    BOOL result = [[UMSocialManager defaultManager] handleOpenURL:url];
    if (!result) {
      // 其他如支付等SDK的回撥
    }
    return result;
  }

- (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url
  {
    BOOL result = [[UMSocialManager defaultManager] handleOpenURL:url];
    if (!result) {
      // 其他如支付等SDK的回撥
    }
    return result;
  }

複製程式碼

對應的方法在UMShareModule.m中檢視。

除錯模式與日誌

之前已經加過日誌庫的資原始檔了。

開啟日誌：

  [UMConfigure setLogEnabled:YES];
複製程式碼

使用分享

至此，ios和adnroid平臺的整合和工程配置基本完成，最後一步就是使用原生程式碼匯出的分享模組供js呼叫。

進入下載目錄的ReactNative找到common下的js中的ShareUtil.js，拷貝到我們RN目錄下，放入libs資料夾。

android與ios平臺回撥中的code值不一致，ios成功時code:200，android成功時code:0。

首先需要引入ShareUtil檔案：

import ShareUtile from './ShareUtil'
複製程式碼

授權

授權程式碼可以直接使用ShareUtile.auth(platform,callback)，其中platform為平臺id，callback為回撥內容。

詳細對應關係

官方文件給出了三種分享回撥，在這裡使用 ShareUtile.shareboard調起分享皮膚實現分享。

 ShareUtile.shareboard(text,img,url,title,list,(code,message) =>{
            this.setState({result:message});

        });
複製程式碼

text 為分享內容
img 為圖片地址，可以為連結，本地地址以及res圖片（如果使用res,請使用如下寫法：res/icon.png）
url 為分享連結，可以為空
title 為分享連結的標題
list 為分享平臺陣列，如：var list = [0,1,2]
callback中code為錯誤碼，當為0時，標記成功。-
message為錯誤資訊

實現友盟分享
2020-04-05
React Native 實現 Slider 元件
2018-12-27
React NativeIDE元件
React Native 純 javascript toast實現
2019-04-03
React NativeJavaScriptAST
React Native 實現城市選擇元件
2019-10-10
React Native元件
React Native 中實現動態匯入
2022-07-07
React Native
Typescript結合React實踐
2019-07-24
TypeScriptReact
藉助友盟+U-APM實現安卓效能優化總結
2021-11-19
安卓優化
React Native 樣式總結
2018-07-11
React Native
React-Native學習資料分享
2018-05-27
React
在 react-native 中實現 Promise 和 AsyncStorage
2022-04-03
ReactPromise
React-Native實踐
2018-06-03
React
[React Native]react-native-scrollab
2021-09-09
React Native
React-Native專案總結
2018-10-23
React
React Native純乾貨總結
2022-02-22
React Native
在 React Native 中原生實現動態匯入
2024-02-21
React Native
React Native 實現自定義下拉重新整理元件
2020-07-21
React Native元件
結合 Google quicklink，react 專案實現頁面秒開
2018-12-17
GoUIReact
React Native 實踐與感悟
2019-03-31
React Native
React Native 熱更新實踐
2023-04-21
React Native
React Native Icon方案：react-native-svg
2018-09-01
React NativeSVG
React Native 的 2017 年終總結
2019-02-26
React Native
React Native 的 2018 年終總結
2019-01-21
React Native
ReactNative——react-native-video實現視訊全屏播放
2018-03-07
ReactIDE
對友盟分享（Umeng-Share）的功能封裝
2018-04-17
封裝
React Native工程Monorepo改造實踐
2022-12-20
React NativeMono
React Native轉web方案：react-native-web
2018-08-19
React NativeWeb
React Native 使用 react-native-webview 渲染 HTML
2019-10-21
React NativeWebViewHTML
Android 友盟社會化分享的整合與封裝
2018-12-07
Android封裝
react-native配置react-native-image-crop-picker
2019-04-26
React
React Native選擇器元件-react-native-slidepicker
2021-02-18
React Native元件IDE
react-native
2018-07-19
React
React Native 上手
2019-04-27
React Native
react專案結合echarts,百度地圖實現熱力圖
2020-09-18
ReactEcharts地圖
《React Native高效開發》之create-react-native-app
2019-03-04
React NativeAPP
React Native整合到現有的原生專案
2018-11-09
React Native
前端和React Native程式碼互轉總結
2018-03-02
前端React Native
React Native / React除錯技巧
2019-03-01
React Native除錯
react native 包學不包會系列--認識react native
2019-01-01
React Native

React Native 結合友盟實現分享

前言

技術調研

準備

註冊友盟賬號

下載SDK

在各大平臺註冊應用

React native的整合

React Native Android 整合

Android 部分整合

配置Android Manifest XML

初始化設定

簽名配置

React Native IOS 整合

第三方平臺配置

初始化設定

除錯模式與日誌

使用分享

相關文章