示例用法

云眼About 2 min

示例用法

本主题提供了一个简短的代码示例,说明如何使用 Eyeofcloud React Native SDK 来评估灰度发布(特性标帜)、激活 A/B 测试或功能测试。

安装 SDK 后,将 Eyeofcloud 库导入代码,获取 Eyeofcloud 项目的数据文件,并实例化客户端。然后,可以使用客户端评估标帜规则,包括 A/B 测试和标帜传递。

此示例演示了以下每个概念的基本用法:

  1. 使用决策挂钩评估带有键的标帜。作为副作用,决策挂钩还会向 Eyeofcloud 发送决策事件,以记录当前用户已暴露于实验。product_sort

  2. 有条件地执行特征代码。有以下几种选择:

  • 获取标帜启用状态,然后检查标帜上名为 的配置变量。SDK 会评估标帜规则,并确定用户所处的标帜变体,从而确定他们应该看到的排序方法变量。sort_method
  • 获取标帜变体,然后运行“控制”或“处理”代码。
  1. 使用事件跟踪跟踪名为 的事件。此转化事件衡量实验的影响。使用 Track 方法,购买会自动归因于我们做出决定的正在运行的 A/B 测试,SDK 通过可自定义的事件调度程序向 Eyeofcloud 发送网络请求,以便我们可以将其计入“结果”页面。 purchased

React

import React from 'react'; import { Button, Text, } from 'react-native'; import { createInstance, EyeofcloudProvider, useDecision, withEyeofcloud, } from '@eyeofcloud/react-sdk'; const eyeofcloud = createInstance({ sdkKey: '<Your_SDK_Key>', // TODO: Update to your SDK Key }) function Button(props) { const handlePress = () => { const { eyeofcloud } = props; eyeofcloud.track('purchased') }; return <Button onPress={handlePress}>Purchase</Button>; } const PurchaseButton = withEyeofcloud(Button) function ProductSort() { const [ decision ] = useDecision('product_sort'); const variationKey = decision.variationKey; const isEnabled = decision.enabled; const sortMethod = decision.variables['sort_method']; return ( <div> { /* If variation is null, display error */ } { variationKey === null && <Text style={styles.error}>{ decision.reasons }</Text> } { /* If feature is enabled, do something with the Sort Method variable */ } { isEnabled && <Text>The Sorth method is {sortMethod}</Text> } { /* Show relevant component based on the variation key */ } { variationKey === 'control' && <Text>Control Component</Text> } { variationKey === 'treatment' && <Text>Treatment Component</Text> } { /* Show Purchase Button to track Purchase event */ } <PurchaseButton /> </div> ) } function App() { return ( <EyeofcloudProvider eyeofcloud={eyeofcloud} user={{ id: 'user123' }}> <ProductSort /> </EyeofcloudProvider> ); } export default App;

Last update:
Contributors: “zhangweixue”