Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-native-youzan

ybwdaisy41MIT1.1.9TypeScript support: included

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

YouzanSDK, react-native

readme

React Native Youzan Getting Started Guide

NPM Version Downloads License

安装依赖包

yarn add react-native-youzan

npm install react-native-youzan --save
react-native link react-native-youzan

初始化 SDK

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

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

iOS

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

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

...

@interface AppDelegate () <YZSDKDelegate>
@end

...

@implementation AppDelegate

...

- (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.14.14", {
    exclude group: "com.android.support", module: "x5official"
  }
}

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 from 'react';
import { Dimensions } from 'react-native';
import { YouzanBrowser } from 'react-native-youzan';
const { width, height } = Dimensions.get('screen');

const App = (): JSX.Element => {
  return (
    <YouzanBrowser
      width={width}
      height={height}
      source={{uri: 'https://github.com/ybwdaisy/react-native-youzan'}}
    />
  );
};

export default App;

更多参考