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;

自定义运输操作

如果需要在运输模式行的右侧追加自定义操作（例如辅助说明、下载指引等），可以通过 transportAction 属性传入任意 React 节点：

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

const CustomActionExample = () => {
  const segments = [
    {
      startLocation: 'Portello',
      startTime: '5:19',
      endLocation: 'Garibaldi FS',
      endTime: '5:25',
      transportMode: {
        type: 'metro',
        color: '#FF5722',
        label: 'M5',
      },
      duration: '9 min',
      stopsText: '6 stops',
      transportAction: (
        <TouchableOpacity onPress={() => console.log('查看无障碍指引')}>
          <Text style={{ color: '#003D78', fontWeight: '600' }}>Accessibility Guide</Text>
        </TouchableOpacity>
      ),
    },
  ];

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

export default CustomActionExample;

国际化支持

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

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