跳至主要内容

OneTierSelector

OneTierSelector 组件显示策略可用的投资等级，并允许用户选择一个。等级定义了最低和最高投资金额、预期收益以及策略的任何特殊条件。

仅限 React Native

OneTierSelector 从 @one_deploy/sdk 的 React Native 入口导出。不适用于 Web 平台。

快速入门​

import { useState } from 'react';
import { OneTierSelector } from '@one_deploy/sdk';
import type { Tier } from '@one_deploy/sdk';

function TierStep({ tiers }: { tiers: Tier[] }) {
  const [selectedTier, setSelectedTier] = useState<Tier | null>(null);

  return (
    <OneTierSelector
      tiers={tiers}
      onSelect={(tier) => {
        setSelectedTier(tier);
        console.log('Selected tier:', tier.name);
      }}
    />
  );
}

Tier 类型​

interface Tier {
  /** Unique tier identifier. */
  id: string;

  /** Human-readable tier name, e.g. "Bronze", "Silver", "Gold". */
  name: string;

  /** Short description of this tier's benefits. */
  description: string;

  /** Minimum investment amount in USD. */
  minInvestment: number;

  /** Maximum investment amount in USD, or null for unlimited. */
  maxInvestment: number | null;

  /** Expected annual percentage yield for this tier. */
  expectedApy: number;

  /** Additional benefits or features for this tier. */
  features: string[];

  /** Whether this tier is currently available. */
  isAvailable: boolean;

  /** Display order (lower numbers shown first). */
  sortOrder: number;
}

OneTierSelectorProps​

interface OneTierSelectorProps {
  /** Array of Tier objects to display. Typically from AIStrategy.tiers. */
  tiers: Tier[];

  /** Currently selected tier ID. */
  selectedTierId?: string;

  /** Callback fired when the user selects a tier. */
  onSelect: (tier: Tier) => void;

  /** Whether to show the min/max investment range. Defaults to true. */
  showInvestmentRange?: boolean;

  /** Whether to show the expected APY. Defaults to true. */
  showExpectedApy?: boolean;

  /** Whether to show the feature list. Defaults to true. */
  showFeatures?: boolean;

  /** Whether to show unavailable tiers (greyed out). Defaults to false. */
  showUnavailable?: boolean;

  /** Layout direction. Defaults to 'vertical'. */
  layout?: 'vertical' | 'horizontal';

  /** Additional style applied to the container. */
  style?: ViewStyle;

  /** Style applied to each tier card. */
  cardStyle?: ViewStyle;

  /** Style applied to the selected tier card. */
  selectedCardStyle?: ViewStyle;

  /** Test ID for testing frameworks. */
  testID?: string;
}

属性表​

属性类型必填默认值说明
tiersTier[]是--要显示的 Tier 对象数组
selectedTierIdstring否--当前选中的等级 ID
onSelect(tier: Tier) => void是--选择回调
showInvestmentRangeboolean否true显示最小/最大金额
showExpectedApyboolean否true在每张卡片上显示 APY
showFeaturesboolean否true显示功能列表
showUnavailableboolean否false显示灰色的不可用等级
layout'vertical' | 'horizontal'否'vertical'卡片布局方向
styleViewStyle否--容器样式
cardStyleViewStyle否--单个卡片样式
selectedCardStyleViewStyle否--选中卡片样式
testIDstring否--测试 ID

使用示例​

配合策略等级使用​

import { useState, useEffect } from 'react';
import { OneTierSelector, OneEngineClient } from '@one_deploy/sdk';
import type { AIStrategy, Tier } from '@one_deploy/sdk';

function TierSelection({ strategyId }: { strategyId: string }) {
  const [strategy, setStrategy] = useState<AIStrategy | null>(null);
  const [selectedTier, setSelectedTier] = useState<Tier | null>(null);

  const engine = new OneEngineClient({
    apiKey: process.env.ONE_API_KEY!,
    projectId: process.env.ONE_PROJECT_ID!,
  });

  useEffect(() => {
    engine.getAIStrategy(strategyId, { includeTiers: true }).then(setStrategy);
  }, [strategyId]);

  if (!strategy) return <ActivityIndicator />;

  return (
    <View>
      <Text style={styles.heading}>Select a Tier</Text>

      <OneTierSelector
        tiers={strategy.tiers}
        selectedTierId={selectedTier?.id}
        showInvestmentRange={true}
        showExpectedApy={true}
        showFeatures={true}
        onSelect={(tier) => {
          setSelectedTier(tier);
          console.log('Tier:', tier.name, 'Min:', tier.minInvestment);
        }}
      />

      {selectedTier && (
        <View style={styles.selected}>
          <Text>Selected: {selectedTier.name}</Text>
          <Text>
            Range: ${selectedTier.minInvestment}
            {selectedTier.maxInvestment ? ` - $${selectedTier.maxInvestment}` : '+'}
          </Text>
          <Text>APY: {selectedTier.expectedApy}%</Text>
        </View>
      )}
    </View>
  );
}

水平布局​

import { OneTierSelector } from '@one_deploy/sdk';
import type { Tier } from '@one_deploy/sdk';

function HorizontalTierSelector({ tiers }: { tiers: Tier[] }) {
  return (
    <OneTierSelector
      tiers={tiers}
      layout="horizontal"
      showFeatures={false}
      cardStyle={{
        width: 160,
        marginRight: 12,
        borderRadius: 12,
        padding: 16,
        backgroundColor: '#1a1a2e',
      }}
      selectedCardStyle={{
        backgroundColor: '#2d2d5e',
        borderWidth: 2,
        borderColor: '#6366f1',
      }}
      onSelect={(tier) => console.log('Selected:', tier.id)}
    />
  );
}

显示不可用等级​

import { OneTierSelector } from '@one_deploy/sdk';
import type { Tier } from '@one_deploy/sdk';

function TierSelectorWithUnavailable({ tiers }: { tiers: Tier[] }) {
  return (
    <OneTierSelector
      tiers={tiers}
      showUnavailable={true}
      onSelect={(tier) => {
        // Only available tiers fire onSelect
        console.log('Selected available tier:', tier.name);
      }}
    />
  );
}

自定义样式卡片​

import { OneTierSelector } from '@one_deploy/sdk';
import type { Tier } from '@one_deploy/sdk';

const SAMPLE_TIERS: Tier[] = [
  {
    id: 'tier_bronze',
    name: 'Bronze',
    description: 'Entry-level tier for new investors',
    minInvestment: 100,
    maxInvestment: 999,
    expectedApy: 8,
    features: ['Basic strategy access', 'Weekly reports'],
    isAvailable: true,
    sortOrder: 1,
  },
  {
    id: 'tier_silver',
    name: 'Silver',
    description: 'Mid-range tier with enhanced features',
    minInvestment: 1000,
    maxInvestment: 9999,
    expectedApy: 12,
    features: ['All strategies', 'Daily reports', 'Priority support'],
    isAvailable: true,
    sortOrder: 2,
  },
  {
    id: 'tier_gold',
    name: 'Gold',
    description: 'Premium tier for serious investors',
    minInvestment: 10000,
    maxInvestment: null,
    expectedApy: 18,
    features: ['All strategies', 'Real-time reports', 'Dedicated support', 'Custom parameters'],
    isAvailable: true,
    sortOrder: 3,
  },
];

function StyledTierSelector() {
  return (
    <OneTierSelector
      tiers={SAMPLE_TIERS}
      showInvestmentRange={true}
      showExpectedApy={true}
      showFeatures={true}
      style={{ padding: 16 }}
      cardStyle={{
        backgroundColor: '#16213e',
        borderRadius: 16,
        padding: 20,
        marginBottom: 12,
      }}
      selectedCardStyle={{
        backgroundColor: '#1a1a3e',
        borderWidth: 2,
        borderColor: '#a78bfa',
      }}
      onSelect={(tier) => console.log('Tier:', tier.id)}
    />
  );
}

下一步​