示例用法

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

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

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

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

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

• 获取标帜启用状态，然后检查标帜上名为sort_method的配置变量。SDK 会评估标帜规则，并确定用户所处的标帜变体，从而确定他们应该看到的排序方法变量。
• 获取标帜变体，然后运行“控制”或“处理”代码。

3. 使用事件跟踪跟踪名为purchased的事件。此转化事件衡量实验的影响。使用 Track 方法，购买会自动归因于我们做出决定的正在运行的 A/B 测试，SDK 通过可自定义的事件调度程序向 Eyeofcloud 发送网络请求，以便我们可以将其计入“结果”页面。

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;