跳至主要内容

OneForexConsoleView

OneForexConsoleView 是一个 React Native 组件，用于渲染实时交易控制台。它显示来自 StableFX 引擎的流式日志条目，支持筛选、自动滚动和基于严重程度的颜色标记。

仅限 React Native

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

快速入门​

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

function TradingConsole() {
  return (
    <OneForexConsoleView
      autoStart={true}
      maxEntries={500}
      onLogEntry={(entry) => {
        if (entry.severity === 'error') {
          console.warn('Console error:', entry.message);
        }
      }}
    />
  );
}

OneForexConsoleViewProps​

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

interface OneForexConsoleViewProps {
  /** Start the log stream automatically on mount. Defaults to false. */
  autoStart?: boolean;

  /** Maximum number of log entries to keep in memory. Defaults to 1000. */
  maxEntries?: number;

  /** Log types to display. If omitted, all types are shown. */
  filterTypes?: ForexLogType[];

  /** Minimum severity to display. Defaults to "info" (shows all). */
  minSeverity?: 'info' | 'warning' | 'error';

  /** Callback fired for each new log entry received. */
  onLogEntry?: (entry: ForexLogEntry) => void;

  /** Callback fired when the simulation starts. */
  onStart?: () => void;

  /** Callback fired when the simulation stops. */
  onStop?: () => void;

  /** Callback fired on connection or simulation error. */
  onError?: (error: Error) => void;

  /** Whether to auto-scroll to new entries. Defaults to true. */
  autoScroll?: boolean;

  /** Whether to show the toolbar with start/stop/clear controls. Defaults to true. */
  showToolbar?: boolean;

  /** Whether to show the agent status bar. Defaults to true. */
  showAgentBar?: boolean;

  /** Whether to show timestamps on each log entry. Defaults to true. */
  showTimestamps?: boolean;

  /** Time format for log entry timestamps. */
  timeFormat?: 'HH:mm:ss' | 'HH:mm:ss.SSS' | 'ISO';

  /** Font size for log entries. Defaults to 12. */
  fontSize?: number;

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

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

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

  /** Custom styles applied to each log row. */
  logRowStyle?: import('react-native').ViewStyle;

  /** Custom color map for severity levels. */
  severityColors?: {
    info?: string;
    warning?: string;
    error?: string;
    success?: string;
  };

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

属性参考​

属性类型默认值说明
autoStartbooleanfalse挂载时自动开始流式传输。
maxEntriesnumber1000内存中保留的最大日志条目数。
filterTypesForexLogType[]undefined要显示的日志类型白名单。
minSeverity'info' | 'warning' | 'error''info'最低严重程度阈值。
onLogEntry(entry: ForexLogEntry) => voidundefined每条日志条目的回调。
onStart() => voidundefined流式传输开始时调用。
onStop() => voidundefined流式传输停止时调用。
onError(error: Error) => voidundefined流式传输错误时调用。
autoScrollbooleantrue自动滚动到最新条目。
showToolbarbooleantrue显示开始/停止/清除控件。
showAgentBarbooleantrue显示代理状态指示器。
showTimestampsbooleantrue显示每条日志的时间戳。
timeFormat'HH:mm:ss' | 'HH:mm:ss.SSS' | 'ISO''HH:mm:ss'时间戳格式。
fontSizenumber12日志条目字体大小。
theme'dark' | 'light''dark'视觉主题。
styleViewStyleundefined自定义容器样式。
toolbarStyleViewStyleundefined自定义工具栏样式。
logRowStyleViewStyleundefined自定义每行样式。
severityColorsobject见下方自定义严重程度颜色映射。
testIDstringundefined用于测试框架的测试 ID。

默认严重程度颜色​

{
  info:    '#4488ff',
  warning: '#ffaa44',
  error:   '#cc4444',
  success: '#44cc88',
}

使用示例​

自动启动控制台​

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

function LiveConsole() {
  return (
    <View style={{ flex: 1 }}>
      <OneForexConsoleView
        autoStart={true}
        maxEntries={500}
        showAgentBar={true}
        showToolbar={true}
        timeFormat="HH:mm:ss.SSS"
      />
    </View>
  );
}

仅交易日志视图​

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

function TradeOnlyConsole() {
  return (
    <OneForexConsoleView
      autoStart={true}
      filterTypes={[
        'TRADE_SUBMITTED',
        'TRADE_QUOTED',
        'TRADE_MATCHED',
        'TRADE_SETTLED',
        'TRADE_FAILED',
      ]}
      showAgentBar={false}
      style={{ flex: 1 }}
    />
  );
}

仅错误和警告​

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

function ErrorConsole() {
  return (
    <OneForexConsoleView
      autoStart={true}
      minSeverity="warning"
      showToolbar={true}
      showAgentBar={false}
      severityColors={{
        warning: '#f59e0b',
        error: '#ef4444',
      }}
      onLogEntry={(entry) => {
        if (entry.severity === 'error') {
          // Send to your error tracking service
          reportError(entry);
        }
      }}
    />
  );
}

受控启动/停止​

import React, { useRef } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import { OneForexConsoleView } from '@one_deploy/sdk/react-native';

function ControlledConsole() {
  return (
    <View style={{ flex: 1 }}>
      <OneForexConsoleView
        autoStart={false}
        showToolbar={true}
        maxEntries={2000}
        onStart={() => console.log('Console streaming started')}
        onStop={() => console.log('Console streaming stopped')}
        onError={(err) => console.error('Console error:', err.message)}
      />
    </View>
  );
}

自定义样式控制台​

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

function StyledConsole() {
  return (
    <OneForexConsoleView
      autoStart={true}
      theme="dark"
      fontSize={11}
      timeFormat="HH:mm:ss"
      style={{
        flex: 1,
        backgroundColor: '#0c0c1a',
        borderRadius: 12,
        overflow: 'hidden',
      }}
      toolbarStyle={{
        backgroundColor: '#14142a',
        paddingHorizontal: 16,
      }}
      logRowStyle={{
        paddingHorizontal: 12,
        paddingVertical: 3,
      }}
      severityColors={{
        info: '#818cf8',
        warning: '#fbbf24',
        error: '#f87171',
        success: '#34d399',
      }}
    />
  );
}

带外部控件的全屏控制台​

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { OneForexConsoleView } from '@one_deploy/sdk/react-native';
import type { ForexLogEntry } from '@one_deploy/sdk';

function FullScreenConsole() {
  const [entryCount, setEntryCount] = useState(0);
  const [lastError, setLastError] = useState<string | null>(null);

  return (
    <View style={styles.container}>
      {/* Status bar */}
      <View style={styles.statusBar}>
        <Text style={styles.statusText}>
          Entries: {entryCount}
        </Text>
        {lastError && (
          <Text style={styles.errorText}>
            Last error: {lastError}
          </Text>
        )}
      </View>

      {/* Console */}
      <OneForexConsoleView
        autoStart={true}
        maxEntries={1000}
        showToolbar={true}
        showAgentBar={true}
        showTimestamps={true}
        timeFormat="HH:mm:ss.SSS"
        fontSize={11}
        style={{ flex: 1 }}
        onLogEntry={(entry) => {
          setEntryCount((c) => c + 1);
          if (entry.severity === 'error') {
            setLastError(entry.message);
          }
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#0a0a14' },
  statusBar: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 8,
    backgroundColor: '#14142a',
  },
  statusText: { color: '#888', fontSize: 11 },
  errorText: { color: '#cc4444', fontSize: 11 },
});

下一步​