React Native 火车票卡片组件 - RNTrainTicketCard

一个高度可定制的 React Native 火车票卡片组件，支持多种形态展示，并内置国际化支持。

特性

• 🎨 两种预设形态（默认卡片和带标题卡片）
• 🌐 内置国际化支持（英语、中文、日语、意大利语）
• 🎯 完全类型化的 TypeScript 支持
• 🔄 支持自定义标签和样式
• 📱 适配各种屏幕尺寸
• 🎨 支持渐变背景色

安装

# 使用 npm
npm install @cniot/rn-ticket-book-card

# 使用 yarn
yarn add @cniot/rn-ticket-book-card

必要依赖

本组件库依赖以下基础包，这些包通常在 React Native 项目中已经存在：

• react (>=18.0.0)
• react-native (>=0.71.0)
• expo (>=44.0.0)
• expo-linear-gradient (>=14.0.0)
• react-native-dashed-line (>=1.0.0)

使用方法

基本用法

import React from 'react';
import { View } from 'react-native';
import { RNTrainTicketCard } from '@cniot/rn-ticket-book-card';

const MyComponent = () => {
  return (
    <View style={{ padding: 10 }}>
      <RNTrainTicketCard 
        departureTime="17:10" 
        arrivalTime="22:07" 
        departureStation="Milano Centrale" 
        arrivalStation="Venezia Mestre" 
        duration="4h 57m"
        tagConfigs={[
          { content: "高铁", backgroundColor: "#003D78", textColor: "#FFFFFF" },
          { content: "G101", backgroundColor: "#8E44AD", textColor: "#FFFFFF" }
        ]}
      />
    </View>
  );
};

export default MyComponent;

带标题卡片（可用）

<RNTrainTicketCard 
  departureTime="18:10" 
  arrivalTime="23:07" 
  departureStation="Milano Centrale" 
  arrivalStation="Venezia Mestre" 
  duration="4h 57m"
  tagConfigs={[
    { content: "高铁", backgroundColor: "#003D78", textColor: "#FFFFFF" },
    { content: "G101", backgroundColor: "#8E44AD", textColor: "#FFFFFF" }
  ]}
  hasTitle={true}
  isDisabled={false}
  titleText="Free ticket"
  titleDescription="Reservable"
/>

带标题卡片（禁用）

<RNTrainTicketCard 
  departureTime="18:10" 
  arrivalTime="23:07" 
  departureStation="Milano Centrale" 
  arrivalStation="Venezia Mestre" 
  duration="4h 57m"
  tagConfigs={[
    { content: "高铁", backgroundColor: "#003D78", textColor: "#FFFFFF" },
    { content: "G101", backgroundColor: "#8E44AD", textColor: "#FFFFFF" }
  ]}
  hasTitle={true}
  isDisabled={true}
  titleText="Free ticket"
  titleDescription="Not reservable"
/>

自定义样式

<RNTrainTicketCard 
  departureTime="17:10" 
  arrivalTime="22:07" 
  departureStation="Milano Centrale" 
  arrivalStation="Venezia Mestre" 
  duration="4h 57m"
  tagConfigs={[
    { content: "高铁", backgroundColor: "#003D78", textColor: "#FFFFFF" },
    { content: "G101", backgroundColor: "#8E44AD", textColor: "#FFFFFF" }
  ]}
  containerStyle={{ borderColor: '#4682b4' }}
  timeStyle={{ color: '#4682b4', fontSize: 20 }}
  stationStyle={{ color: '#708090', fontSize: 14 }}
  hasShadow={false}
  hasRoundedCorners={true}
/>

国际化支持

本组件内置了国际化支持，可以与业务项目中的 i18next 集成使用。组件内部包含英语、中文、日语和意大利语的基本翻译。

与业务项目的 i18next 集成

组件会自动检测并使用业务项目中注入的 i18next 实例。如果业务项目中已经设置了 i18next，组件将使用业务项目的翻译资源，同时业务项目的翻译会覆盖组件内部的翻译。

// 业务项目中的 i18next 配置
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: {
        translation: {
          trainTicketCard: {
            train: '列车', // 这将覆盖组件内部的翻译
            // 其他翻译...
          }
        }
      },
      // 其他语言...
    },
    lng: 'zh',
    fallbackLng: 'en',
  });

// 将 i18next 实例暴露给全局，以便组件可以访问
window.i18next = i18n; // 在 Web 环境
global.i18next = i18n; // 在 React Native 环境
global.i18nextLng = 'zh'; // 设置当前语言

API 参考

RNTrainTicketCard Props

| 属性 | 类型 | 默认值 | 描述 | |------|------|--------|------| | departureTime | string | - | 出发时间 | | arrivalTime | string | - | 到达时间 | | departureStation | string | - | 出发站点 | | arrivalStation | string | - | 到达站点 | | duration | string | - | 行程时长 | | hasTitle | boolean | false | 是否为带标题卡片 | | isDisabled | boolean | false | 是否禁用（仅当hasTitle为true时有效） | | titleText | string | - | 自定义标题文本 | | titleDescription | string | - | 标题描述文本 | | headerTitle | string | - | 卡片内容标题 | | tagConfigs | TagConfig[] | - | 标签配置列表 | | containerStyle | StyleProp | - | 卡片容器的附加样式 | | hasShadow | boolean | true | 是否显示阴影 | | hasRoundedCorners | boolean | true | 是否显示圆角 | | timeStyle | StyleProp | - | 时间文本的附加样式 | | stationStyle | StyleProp | - | 站点文本的附加样式 | | tagStyle | StyleProp | - | 标签的附加样式 | | tagTextStyle | StyleProp | - | 标签文本的附加样式 | | tags | React.ReactNode[] | - | 自定义标签内容 |

TagConfig 类型

| 属性 | 类型 | 必填 | 描述 | |------|------|------|------| | content | string | 是 | 标签内容 | | backgroundColor | string | 是 | 标签背景颜色 | | textColor | string | 否 | 标签文本颜色，默认为白色 |

注意事项

• 当 hasTitle 为 true 时，卡片将显示标题、描述和图标
• 当 hasTitle 为 true 且 isDisabled 为 true 时，卡片将显示为禁用状态
• 带标题卡片使用渐变背景色，需要安装 expo-linear-gradient 依赖
• 虚线使用 react-native-dashed-line 库实现，需要安装该依赖
• 自定义样式 containerStyle、timeStyle 等将覆盖默认样式
• 组件内置的国际化支持仅包含基本的卡片文本，如需更多翻译，请在业务项目中注入

文档

完整的文档和示例可以在以下地址查看：

所有组件文档网站 模板组件文档网址

许可证

MIT