React Native Youzan Getting Started Guide

安装依赖包

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 安全码（配置教程参考官方文档）

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

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;

更多参考

• Props 详情：API Reference
• 实例方法：Method
• SDK 静态方法：SDK Method