OneForexPairSelector

OneForexPairSelector 是一个 React Native 组件，为 StableFX 支持的 6 个货币对提供选择界面。它支持单选、显示货币对元数据，并与 FOREX_CURRENCY_PAIRS 常量集成。

仅限 React Native

OneForexPairSelector 从 @one_deploy/sdk/react-native 导出。不适用于 Web 平台。

快速入门

import { OneForexPairSelector } from '@one_deploy/sdk/react-native';

function PairPicker() {
  return (
    <OneForexPairSelector
      selectedPair="EUR/USD"
      onSelectPair={(pair) => {
        console.log('Selected:', pair);
      }}
    />
  );
}

OneForexPairSelectorProps

import type { OneForexPairSelectorProps } from '@one_deploy/sdk';

interface OneForexPairSelectorProps {
  /** Currently selected pair identifier (e.g. "EUR/USD"). */
  selectedPair?: string;

  /** Callback fired when the user selects a pair. */
  onSelectPair: (pair: string) => void;

  /** Subset of pairs to display. If omitted, all 6 pairs are shown. */
  pairs?: string[];

  /** Layout mode for the pair options. */
  layout?: 'grid' | 'list' | 'chips';

  /** Whether to show the pair's display name below the identifier. Defaults to true. */
  showDisplayName?: boolean;

  /** Whether to show the min/max trade size for each pair. Defaults to false. */
  showTradeLimits?: boolean;

  /** Whether to show an active/inactive indicator. Defaults to false. */
  showStatus?: boolean;

  /** Disable interaction (read-only display). Defaults to false. */
  disabled?: boolean;

  /** Visual theme variant. */
  theme?: 'dark' | 'light';

  /** Custom styles applied to the container. */
  style?: import('react-native').ViewStyle;

  /** Custom styles applied to each pair option. */
  optionStyle?: import('react-native').ViewStyle;

  /** Custom styles applied to the selected pair option. */
  selectedOptionStyle?: import('react-native').ViewStyle;

  /** Custom styles applied to the pair text label. */
  labelStyle?: import('react-native').TextStyle;

  /** Custom styles applied to the selected pair text. */
  selectedLabelStyle?: import('react-native').TextStyle;

  /** Custom color for the selected state. */
  selectedColor?: string;

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

属性参考

属性	类型	默认值	说明
selectedPair	string	undefined	当前选中的货币对。
onSelectPair	(pair: string) => void	必填	选择回调。
pairs	string[]	全部 6 个货币对	要显示的货币对子集。
layout	'grid' | 'list' | 'chips'	'chips'	布局模式。
showDisplayName	boolean	true	显示完整的货币对名称。
showTradeLimits	boolean	false	显示最小/最大交易额。
showStatus	boolean	false	显示活跃/非活跃指示器。
disabled	boolean	false	禁用交互。
theme	'dark' | 'light'	'dark'	视觉主题。
style	ViewStyle	undefined	自定义容器样式。
optionStyle	ViewStyle	undefined	自定义选项样式。
selectedOptionStyle	ViewStyle	undefined	自定义选中选项样式。
labelStyle	TextStyle	undefined	自定义标签文本样式。
selectedLabelStyle	TextStyle	undefined	自定义选中标签样式。
selectedColor	string	"#4488ff"	选中状态的强调色。
testID	string	undefined	用于测试框架的测试 ID。

使用示例

Chips 布局（默认）

import React, { useState } from 'react';
import { View } from 'react-native';
import { OneForexPairSelector } from '@one_deploy/sdk/react-native';

function ChipSelector() {
  const [pair, setPair] = useState('EUR/USD');

  return (
    <View style={{ padding: 16 }}>
      <OneForexPairSelector
        selectedPair={pair}
        onSelectPair={setPair}
        layout="chips"
      />
    </View>
  );
}

网格布局（带交易限额）

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import { OneForexPairSelector } from '@one_deploy/sdk/react-native';

function GridSelector() {
  const [pair, setPair] = useState('GBP/USD');

  return (
    <View style={{ padding: 16 }}>
      <Text style={{ color: '#fff', fontSize: 16, fontWeight: '700', marginBottom: 12 }}>
        Select Pair
      </Text>
      <OneForexPairSelector
        selectedPair={pair}
        onSelectPair={setPair}
        layout="grid"
        showTradeLimits={true}
        showDisplayName={true}
      />
    </View>
  );
}

列表布局（带状态指示器）

import React, { useState } from 'react';
import { View } from 'react-native';
import { OneForexPairSelector } from '@one_deploy/sdk/react-native';

function ListSelector() {
  const [pair, setPair] = useState('USD/JPY');

  return (
    <View style={{ flex: 1 }}>
      <OneForexPairSelector
        selectedPair={pair}
        onSelectPair={setPair}
        layout="list"
        showDisplayName={true}
        showStatus={true}
        showTradeLimits={true}
      />
    </View>
  );
}

货币对子集

import React, { useState } from 'react';
import { View } from 'react-native';
import { OneForexPairSelector } from '@one_deploy/sdk/react-native';

function MajorPairsOnly() {
  const [pair, setPair] = useState('EUR/USD');

  return (
    <OneForexPairSelector
      selectedPair={pair}
      onSelectPair={setPair}
      pairs={['EUR/USD', 'GBP/USD', 'USD/JPY']}
      layout="chips"
    />
  );
}

自定义样式选择器

import React, { useState } from 'react';
import { View } from 'react-native';
import { OneForexPairSelector } from '@one_deploy/sdk/react-native';

function StyledSelector() {
  const [pair, setPair] = useState('AUD/USD');

  return (
    <OneForexPairSelector
      selectedPair={pair}
      onSelectPair={setPair}
      layout="chips"
      selectedColor="#6366f1"
      theme="dark"
      style={{
        padding: 12,
        backgroundColor: '#0f172a',
        borderRadius: 12,
      }}
      optionStyle={{
        paddingHorizontal: 18,
        paddingVertical: 10,
        borderRadius: 24,
        borderWidth: 1.5,
        borderColor: '#334155',
      }}
      selectedOptionStyle={{
        borderColor: '#6366f1',
        backgroundColor: '#1e1b4b',
      }}
      labelStyle={{
        fontSize: 14,
        fontWeight: '500',
        color: '#94a3b8',
      }}
      selectedLabelStyle={{
        color: '#a5b4fc',
        fontWeight: '700',
      }}
    />
  );
}

在投资表单中使用

import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
import { OneForexPairSelector } from '@one_deploy/sdk/react-native';
import { useForexInvestments } from '@one_deploy/sdk';

function InvestmentFormWithPairSelector() {
  const [pair, setPair] = useState('EUR/USD');
  const [amount, setAmount] = useState('');
  const { createInvestment } = useForexInvestments();

  const handleSubmit = async () => {
    const deposit = parseFloat(amount);
    if (!deposit || deposit <= 0) return;

    await createInvestment({
      amount: deposit,
      currencyPair: pair,
      cycle: '30d',
    });
  };

  return (
    <View style={styles.form}>
      <Text style={styles.label}>Currency Pair</Text>
      <OneForexPairSelector
        selectedPair={pair}
        onSelectPair={setPair}
        layout="chips"
        showDisplayName={false}
        style={{ marginBottom: 20 }}
      />

      <Text style={styles.label}>Amount (USDC)</Text>
      <TextInput
        value={amount}
        onChangeText={setAmount}
        placeholder="Enter amount"
        placeholderTextColor="#666"
        keyboardType="numeric"
        style={styles.input}
      />

      <TouchableOpacity onPress={handleSubmit} style={styles.submitBtn}>
        <Text style={styles.submitText}>
          Invest in {pair}
        </Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  form: { padding: 16 },
  label: { fontSize: 14, fontWeight: '600', color: '#ccc', marginBottom: 8 },
  input: {
    backgroundColor: '#1a1a2e',
    color: '#fff',
    padding: 12,
    borderRadius: 8,
    fontSize: 16,
    borderWidth: 1,
    borderColor: '#333',
    marginBottom: 20,
  },
  submitBtn: {
    backgroundColor: '#4488ff',
    padding: 14,
    borderRadius: 8,
    alignItems: 'center',
  },
  submitText: { color: '#fff', fontWeight: '600', fontSize: 15 },
});

禁用状态

import { OneForexPairSelector } from '@one_deploy/sdk/react-native';

function DisabledSelector() {
  return (
    <OneForexPairSelector
      selectedPair="EUR/USD"
      onSelectPair={() => {}}
      disabled={true}
      layout="chips"
    />
  );
}

下一步

• 货币对 -- 选择器背后的数据。
• 创建投资 -- 在投资表单中使用货币对选择。
• OneForexCapitalSplit -- 选择货币对后预览分配。