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
AppDelegate.m
文件中添加如下代码
1. 在 ...
#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
android/build.gradle
添加有赞 maven
仓库地址
1. 在 allprojects {
repositories {
...
maven { url 'https://maven.youzanyun.com/repository/maven-releases' }
}
}
app/build.gradle
添加依赖
2. 在 dependencies {
...
implementation 'com.youzanyun.open.mobile:x5sdk:7.1.17', {
exclude group: 'com.android.support'
}
}
MainApplication
中添加如下代码
3. 在 ...
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