React Native UI Template - RnCell

一个高度可定制的 React Native 单元格组件，支持左侧标题和右侧内容的布局，可用于展示信息和操作的列表项。

特性

• 🎨 可定制的样式和主题
• 🌍 内置国际化支持（英语、中文、日语、意大利语）
• 📱 适配不同屏幕尺寸
• 🔗 支持链接样式和点击事件
• 🧩 支持分组展示
• 🎯 完全类型化的 TypeScript 支持

安装

# 使用 npm
npm install @cniot/rn-cell

# 使用 yarn
yarn add @cniot/rn-cell

必要依赖

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

• react (>=16.8.0)
• react-native (>=0.60.0)
• expo (>=44.0.0)

使用方法

基本用法

import React from 'react';
import { View } from 'react-native';
import { RnCell } from '@cniot/rn-cell';

const MyComponent = () => {
  return (
    <View style={{ backgroundColor: '#f5f5f5' }}>
      <RnCell title="类型" value="First Class" />
      <RnCell title="车厢" value="5" />
      <RnCell title="座位" value="12A" />
    </View>
  );
};

export default MyComponent;

使用单元格分组

import React from 'react';
import { View } from 'react-native';
import { RnCellGroup } from '@cniot/rn-cell';

const MyComponent = () => {
  return (
    <View style={{ backgroundColor: '#f5f5f5' }}>
      <RnCellGroup 
        cells={[
          { title: '类型', value: 'First Class' },
          { title: '车厢', value: '5' },
          { title: '座位', value: '12A' },
          { title: '订单号', value: '152098100001010' },
          { title: '下单时间', value: 'Apr 29 - 18:10 ~ 23:07' }
        ]}
        rounded
        titleStyle={{ fontWeight: 'bold' }}
        valueStyle={{ color: '#003D78' }}
      />
    </View>
  );
};

export default MyComponent;

带链接的单元格

import React from 'react';
import { View, Alert } from 'react-native';
import { RnCell } from '@cniot/rn-cell';

const MyComponent = () => {
  return (
    <View style={{ backgroundColor: '#f5f5f5' }}>
      <RnCell 
        title="查看详情" 
        isLink 
        onPress={() => Alert.alert('点击了详情')} 
      />
    </View>
  );
};

export default MyComponent;

自定义内容

import React from 'react';
import { View, Text, Switch } from 'react-native';
import { RnCell } from '@cniot/rn-cell';

const MyComponent = () => {
  const [isEnabled, setIsEnabled] = React.useState(false);
  
  return (
    <View style={{ backgroundColor: '#f5f5f5' }}>
      <RnCell 
        title="开启通知" 
        rightContent={
          <Switch 
            value={isEnabled} 
            onValueChange={setIsEnabled} 
          />
        } 
      />
    </View>
  );
};

export default MyComponent;

国际化支持

组件内置了英语、中文、意大利语和日语的翻译。您可以通过 i18next 注入自己的翻译：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: {
        translation: {
          rnCell: {
            type: 'Type',
            // 其他翻译...
          }
        }
      }
    },
    lng: 'en',
    fallbackLng: 'en',
  });

API

RnCell

| 属性 | 类型 | 默认值 | 描述 | |------|------|--------|------| | title | string | - | 单元格左侧标题 | | value | string | - | 单元格右侧内容 | | rightContent | React.ReactNode | - | 单元格右侧自定义内容 | | leftContent | React.ReactNode | - | 单元格左侧自定义内容 | | isLink | boolean | false | 是否显示右侧箭头 | | border | boolean | true | 是否显示下边框 | | borderStyle | StyleProp | - | 自定义下边框样式 | | disabled | boolean | false | 是否禁用单元格 | | onPress | () => void | - | 单元格点击事件 | | containerStyle | StyleProp | - | 单元格容器样式 | | titleStyle | StyleProp | - | 单元格标题样式 | | valueStyle | StyleProp | - | 单元格内容样式 |

RnCellGroup

| 属性 | 类型 | 默认值 | 描述 | |------|------|--------|------| | cells | RnCellProps[] | - | 单元格数据数组 | | rounded | boolean | false | 是否显示圆角 | | containerStyle | StyleProp | - | 应用于每个单元格的容器样式 | | borderStyle | StyleProp | - | 应用于每个单元格的边框样式 | | wrapperStyle | StyleProp | - | 分组外层容器样式 | | titleStyle | StyleProp | - | 应用于每个单元格的标题样式 | | valueStyle | StyleProp | - | 应用于每个单元格的内容样式 |

高级用法

自定义边框样式

import React from 'react';
import { View } from 'react-native';
import { RnCell } from '@cniot/rn-cell';

const MyComponent = () => {
  return (
    <View style={{ backgroundColor: '#f5f5f5' }}>
      <RnCell 
        title="自定义边框" 
        value="自定义颜色和宽度" 
        borderStyle={{ 
          borderBottomColor: '#003D78', 
          borderBottomWidth: 2 
        }} 
      />
    </View>
  );
};

export default MyComponent;

处理长文本内容

RnCell 组件支持长文本自动换行，包括长单词、邮箱地址和URL等，无需额外配置：

import React from 'react';
import { View } from 'react-native';
import { RnCell } from '@cniot/rn-cell';

const MyComponent = () => {
  return (
    <View style={{ backgroundColor: '#f5f5f5' }}>
      <RnCell 
        title="邮箱" 
        value="[email protected]" 
      />
      <RnCell 
        title="网址" 
        value="https://www.example.com/very/long/path/that/needs/to/wrap" 
      />
    </View>
  );
};

export default MyComponent;

注意事项

• 组件使用 React Hooks，确保您使用的是 React 16.8 或更高版本
• 为了获得最佳的视觉效果，建议在浅色背景上使用此组件
• 国际化功能需要配合 i18next 和 react-i18next 使用
• 当使用 RnCellGroup 时，cells 数组中的样式属性会覆盖 RnCellGroup 的样式属性

许可证

MIT