@cniot/rn-planing-card v0.1.0

RNPlanningCard

React Native 交通规划卡片组件，用于展示交通路线信息，包含时间轴、运输模式、站点信息等。

特性

• 🚌 支持多种运输模式：公交、地铁、火车、自驾、步行等
• 📅 时间轴展示功能，清晰显示路线信息
• 🔄 支持中间站点展开/收起功能
• 🎨 可配置的头部区域，支持不同背景色和图标
• 🎯 自定义运输模式图标和颜色
• 🌐 完整的国际化支持（中文、英文、日文、意大利文）
• 📱 响应式设计，适配不同屏幕尺寸
• 📝 完整的 TypeScript 类型定义

安装

npm install @cniot/rn-planing-card
# 或
yarn add @cniot/rn-planing-card

必要依赖

本组件依赖以下库，请确保您的项目中已安装：

# 核心依赖
npm install react react-native

# 国际化支持（可选，但推荐）
npm install react-i18next i18next

基本用法

import React from 'react';
import { View } from 'react-native';
import { RNPlanningCard } from '@cniot/rn-planing-card';

const MyComponent = () => {
  const segments = [
    {
      startLocation: "Milano Centrale Train Station",
      startTime: "5:41",
      endLocation: "Venezia Mestre Train Station",
      endTime: "8:32",
      transportMode: {
        type: 'train',
        color: '#B71C1C',
        label: 'Intercity 701'
      },
      duration: "2 hr 51 min",
      stopsText: "7 stops",
      showTimetable: true,
      timetableText: "查看时刻表",
      onTimetablePress: () => console.log('查看时刻表')
    }
  ];

  return (
    <View style={{ padding: 10 }}>
      <RNPlanningCard segments={segments} />
    </View>
  );
};

export default MyComponent;

国际化支持

组件内置了国际化支持，您可以通过以下方式使用：

1. 如果您的项目已经使用了 i18next，组件会自动使用您项目中的 i18next 实例
2. 如果您的项目没有使用 i18next，组件会使用内置的翻译资源

// 在您的项目中初始化 i18next
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: {
        translation: {
          // 您的翻译资源
          rnPlanningCard: {
            // 组件特定的翻译可以覆盖组件内置的翻译
            timetable: '自定义时刻表文本'
          }
        }
      }
    },
    lng: 'en',
    fallbackLng: 'en'
  });

// 然后在组件中使用
import { RNPlanningCard } from '@cniot/rn-planing-card';

注意事项

1. 组件使用 React 的函数式组件和 Hooks，请确保您的 React 版本 >= 16.8.0
2. 组件样式使用 React Native 的 StyleSheet，确保与您的项目样式系统兼容
3. 如果您需要自定义组件样式，可以通过 containerStyle、headerStyle 和 contentStyle 属性进行定制
4. 组件内部使用了 React.useState 等 hooks，如果您在严格模式下使用，可能会看到一些警告

许可证

MIT