2
Watch
7
Star
0
Fork
4
Issue

对有赞 Android SDK 和 iOS SDK 的 React Native 封装

ybwdaisy
ybwdaisy
pushedAt 1 month ago

ybwdaisy/react-native-youzan

React Native Youzan Getting Started Guide

NPM Version Downloads License

安装依赖包

yarn add react-native-youzan

npm install react-native-youzan --save

对于 React Native 0.59 以下版本需要手动 link

react-native link react-native-youzan

初始化 SDK

❗️❗️❗️】在有赞云控制台获取 client_id,并配置好 App 安全码(配置教程参考官方文档

注意以下代码中 yourClientIdyourAppKey 即为此处配置的值。

iOS

1. 在 AppDelegate.m 文件中添加如下代码

...
#import <YZBaseSDK/YZBaseSDK.h>

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

  YZConfig *yzConfig = [[YZConfig alloc] initWithClientId:@"yourClientId" andAppKey:@"yourAppKey"];
  NSArray *URLTypes = [NSBundle mainBundle].infoDictionary[@"CFBundleURLTypes"];
  NSString *scheme = [[URLTypes firstObject][@"CFBundleURLSchemes"] firstObject];
  yzConfig.scheme = scheme;
  [YZSDK.shared initializeSDKWithConfig:yzConfig];
  YZSDK.shared.delegate = self;

  ...
}

Android

1. 在 android/build.gradle 添加有赞 maven 仓库地址

allprojects {
    repositories {
      ...
      maven { url 'https://maven.youzanyun.com/repository/maven-releases' }
    }
}

2. 在 app/build.gradle 添加依赖

dependencies {
  ...
  implementation 'com.youzanyun.open.mobile:x5sdk:7.1.17', {
    exclude group: 'com.android.support'
  }
}

3. 在 MainApplication 中添加如下代码

...
import com.youzan.androidsdk.YouzanSDK;
import com.youzan.androidsdkx5.YouZanSDKX5Adapter;


@Override
public void onCreate() {
  ...
  YouzanSDK.init(this, "yourClientId", "yourAppKey", new YouZanSDKX5Adapter());
}

使用组件

import React, { Component } from 'react';
import { YouzanBrowser } from 'react-native-youzan';

class MyView extends Component {
  render() {
    return (
      <YouzanBrowser
        style={{ flex: 1 }}
        width={375}
        height={600}
        source={{ uri: 'https://github.com/ybwdaisy/react-native-youzan' }}
      />
    );
  }
}

更多参考

ucloud ads