原生成分

一套有风格的系统集成的React Industrial组件,用于构建美丽,一致的UI. 这些组件被设计用于AI-动力代码生成工具.

安装

npm install @evlop/native-components

快速启动

import { Box, Flexbox, Text, Icon, Button, Actionable, Image, ImageBackground, Swiper, triggerHapticFeedback } from 'types-for-ai';

组件使用大小写( U)

框图

一个风格 View 组件,用于支持布局、间隔、边框、颜色和定位.

// Basic container
<Box padding={16} backgroundColor="white" borderRadius={8}>
  <Text>Content</Text>
</Box>

// Card with shadow effect
<Box 
  margin={16}
  padding={20}
  backgroundColor="white"
  borderRadius={12}
  borderWidth={1}
  borderColor="gray-200"
>
  <Text>Card Content</Text>
</Box>

// Absolute positioned overlay
<Box position="absolute" top={0} left={0} right={0} bottom={0} opacity={0.5} backgroundColor="black" />

道具 : 所有反应原生 ViewProps + 键 flexbox, (中文(简体) ), border, (中文(简体) ), layout, (中文(简体) ), color, (中文(简体) ), background, (中文(简体) ), space, (中文(简体) ), opacity, (中文(简体) ), position

缩写框

默认的弹性盒容器 flexDirection: 'row' 和差距支持.

// Horizontal row with items
<Flexbox flexDirection="row" justifyContent="space-between" alignItems="center" gap={12}>
  <Icon icon="home" />
  <Text>Home</Text>
</Flexbox>

// Vertical stack
<Flexbox flexDirection="column" gap={8} padding={16}>
  <Text>Item 1</Text>
  <Text>Item 2</Text>
  <Text>Item 3</Text>
</Flexbox>

// Grid-like layout
<Flexbox flexWrap="wrap" gap={16} rowGap={8} columnGap={12}>
  {items.map(item => <Box key={item.id} width="48%">{item.name}</Box>)}
</Flexbox>

道具 : 全体 Box 道具 + gap, (中文(简体) ), rowGap, (中文(简体) ), columnGap

页:1

一个有打字支持的有样式的文本组件,主题变体,以及模板渲染.

// Basic text
<Text color="gray-900" fontSize={16}>Hello World</Text>

// Styled heading
<Text fontWeight="Bold" fontSize={24} color="primary">
  Welcome Back!
</Text>

// Using theme variants
<Text variant="heading">Heading Text</Text>
<Text variant="body">Body text content</Text>

// Font scaling (relative to base font size)
<Text fontScale={1.5}>Larger Text</Text>

// Dynamic template content (supports handlebars)
<Text content="Hello, {{user.name}}!" />

道具 : color, (中文(简体) ), fontSize, (中文(简体) ), fontWeight, (中文(简体) ), fontScale, (中文(简体) ), textAlign, (中文(简体) ), variant, (中文(简体) ), content + 标准 TextProps

图标

在 RTL 支持下显示来自各种图标库的图标.

// Basic icon
<Icon icon="home" size={24} color="primary" />

// Different sizes
<Icon icon="settings" size={32} color="gray-600" />

// With press handler
<Icon icon="close" onPress={() => navigation.goBack()} />

// RTL flip support (for directional icons like arrows)
<Icon icon="arrow-right" flipOnRTL />

// Supported icon libraries:
// - material-icons
// - material-community-icons
// - font-awesome-6
// - ionicons
// - simple-line-icons
// - evilicons
// - octicons
// - svg (custom SVG URLs)

道具 : icon, (中文(简体) ), size, (中文(简体) ), color, (中文(简体) ), flipOnRTL, (中文(简体) ), onPress

按钮

一个有多个变体、大小、装入状态和图标支持的样式按钮.

// Filled button (default)
<Button label="Get Started" color="primary" action={myAction} />

// Outlined button
<Button label="Learn More" variant="outlined" color="secondary" />

// Ghost button (no background)
<Button label="Cancel" variant="ghost" color="gray-600" />

// Dim outlined (subtle border)
<Button label="Optional" variant="dim-outlined" color="primary" />

// Dim filled outlined (subtle background + border)
<Button label="Soft CTA" variant="dim-filled-outlined" color="primary" />

// With icon
<Button label="Add Item" icon="plus" iconPosition="left" color="primary" />
<Button label="Next" icon="arrow-right" iconPosition="right" />

// Different sizes
<Button label="Small" size="sm" />
<Button label="Medium" size="md" />
<Button label="Large" size="lg" />
<Button label="Extra Large" size="xl" />
<Button label="2X Large" size="2xl" />

// Loading state
<Button label="Submitting..." loading={true} />

// Disabled state
<Button label="Unavailable" disabled={true} />

备选案文: filled, (中文(简体) ), outlined, (中文(简体) ), dim-outlined, (中文(简体) ), dim-filled-outlined, (中文(简体) ), ghost
大小 : sm, (中文(简体) ), md, (中文(简体) ), lg, (中文(简体) ), xl, (中文(简体) ), 2xl
道具 : label, (中文(简体) ), variant, (中文(简体) ), size, (中文(简体) ), color, (中文(简体) ), textColor, (中文(简体) ), icon, (中文(简体) ), iconPosition, (中文(简体) ), loading, (中文(简体) ), disabled, (中文(简体) ), action

可操作

带有新闻效果和随机反馈支持的可压缩包装.

// Basic actionable area
<Actionable action={navigateAction}>
  <Text>Tap me</Text>
</Actionable>

// With scale press effect
<Actionable action={myAction} pressEffect="scale">
  <Box padding={16}><Text>Press to scale</Text></Box>
</Actionable>

// With opacity press effect
<Actionable pressEffect="opacity" action={myAction}>
  <Image src="card-image.jpg" />
</Actionable>

// With haptic feedback
<Actionable action={myAction} hapticFeedback="impactMedium">
  <Text>Haptic button</Text>
</Actionable>

// Combined effects
<Actionable 
  action={addToCartAction}
  pressEffect="bounce"
  hapticFeedback="impactLight"
>
  <Box backgroundColor="primary" padding={12} borderRadius={8}>
    <Text color="white">Add to Cart</Text>
  </Box>
</Actionable>

按下效果 :

• none - 没有视觉效果
• opacity - 媒体的花样
• scale - 略微擦出新闻
• scale-opacity - 将规模和不透明结合起来
• bounce - 弹簧效应
• tilt-left 编号 : tilt-right - 报纸上的倾斜
• pulse - 推动动画
• jelly - 弹性果冻效应
• rubberBand - 橡胶筋拉伸效应
• glow - 亮亮效果
• press-in - 三维压入效应
• swing - 旋转旋转

波动类型 : impactLight, (中文(简体) ), impactMedium, (中文(简体) ), impactHeavy, (中文(简体) ), rigid, (中文(简体) ), soft, (中文(简体) ), notificationSuccess, (中文(简体) ), notificationWarning, (中文(简体) ), notificationError

图像

一个有预设大小和模板 URL 支持的样式图像组件.

// Basic image
<Image src="https://example.com/image.jpg" />

// Using preset sizes
<Image src="product.jpg" size="md" />
<Image src="avatar.jpg" size="xs" />
<Image src="banner.jpg" size="fluid" />

// Custom dimensions
<Image src="photo.jpg" width={200} height={150} />

// With aspect ratio
<Image src="video-thumb.jpg" aspectRatio={16/9} />

// Resize modes
<Image src="cover.jpg" resizeMode="cover" />
<Image src="contain.jpg" resizeMode="contain" />

// With placeholder fallback
<Image src="{{product.image}}" placeholder="default-product.jpg" />

// Dynamic URL with template
<Image src="{{baseUrl}}/images/{{product.id}}.jpg" />

预设大小 : 3xs (15个px), 2xs (35个px), xs (50个px), sm (75页x), md (150页x), lg (275px), (中文(简体) ), xl (300平方厘米), 2xl (400平方厘米), 3xl (480页x), fluid (100%)

道具 : src, (中文(简体) ), placeholder, (中文(简体) ), size, (中文(简体) ), width, (中文(简体) ), height, (中文(简体) ), aspectRatio, (中文(简体) ), resizeMode

图像背景

一个能够包含儿童元素,适合英雄分会和卡片的图像.

// Hero section
<ImageBackground 
  src="hero-bg.jpg" 
  height={300}
  justifyContent="center"
  alignItems="center"
>
  <Text color="white" fontSize={32} fontWeight="Bold">
    Welcome
  </Text>
</ImageBackground>

// Card with background
<ImageBackground 
  src="{{product.coverImage}}"
  aspectRatio={16/9}
  borderRadius={12}
  overflow="hidden"
>
  <Box position="absolute" bottom={0} left={0} right={0} padding={16} backgroundColor="rgba(0,0,0,0.5)">
    <Text color="white">Product Name</Text>
  </Box>
</ImageBackground>

// With template URL and placeholder
<ImageBackground 
  src="{{user.coverPhoto}}"
  placeholder="default-cover.jpg"
  height={200}
>
  {children}
</ImageBackground>

道具 : src, (中文(简体) ), placeholder,所有数据 Box 布局/样式道具

🎠 wi

一个水平旋转木马/滑行手,具有多相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相.

// Basic swiper
<Swiper
  data={slides}
  renderItem={({ item }) => (
    <Image src={item.image} width="100%" aspectRatio={16/9} />
  )}
/>

// With autoplay
<Swiper
  data={banners}
  autoplay
  autoplayInterval={3000}
  renderItem={({ item }) => <BannerCard banner={item} />}
/>

// Different pagination styles
<Swiper data={items} paginationType="dot" />
<Swiper data={items} paginationType="dash" />
<Swiper data={items} paginationType="line" />
<Swiper data={items} paginationType="number" />

// Custom item width
<Swiper
  data={cards}
  itemWidth={280}
  renderItem={({ item }) => <ProductCard product={item} />}
/>

// With index change callback
<Swiper
  data={onboardingScreens}
  onIndexChange={(index) => setCurrentStep(index)}
  renderItem={({ item }) => <OnboardingSlide {...item} />}
/>

// Using ref for programmatic control
const swiperRef = useRef();
<Swiper ref={swiperRef} data={items} />
<Button label="Next" action={() => swiperRef.current.scrollToIndex(2)} />

缓冲类型 : dash, (中文(简体) ), dot, (中文(简体) ), line, (中文(简体) ), number
道具 : data, (中文(简体) ), renderItem, (中文(简体) ), autoplay, (中文(简体) ), autoplayInterval, (中文(简体) ), paginationType, (中文(简体) ), paginationStyle, (中文(简体) ), itemWidth, (中文(简体) ), onIndexChange

触发 Haptic Feedback 命令

触发对所支持设备的随机反馈的功能 .

import { triggerHapticFeedback } from 'types-for-ai';

// On button press
const handlePress = () => {
  triggerHapticFeedback('impactMedium');
  // ... do something
};

// Success notification
const onSuccess = () => {
  triggerHapticFeedback('notificationSuccess');
};

// Error feedback
const onError = () => {
  triggerHapticFeedback('notificationError');
};

// Light tap feedback
triggerHapticFeedback('impactLight');

// Heavy impact
triggerHapticFeedback('impactHeavy');

波动类型 :

• impactLight - 轻放电
• impactMedium - 中型水龙头
• impactHeavy - 重水龙头
• rigid - 强力撞击
• soft - 软撞击
• notificationSuccess - 成功通知模式
• notificationWarning - 警告通知模式
• notificationError - 错误通知模式

样式系统推荐参考

所有构成部分支助 样式系统 道具 :

主题集成

组件自动使用您样式组件的主题值 ThemeProvider数字 :

const theme = {
  colors: {
    primary: '#6366f1',
    secondary: '#8b5cf6',
    'gray-100': '#f3f4f6',
    'gray-900': '#111827',
  },
  space: [0, 4, 8, 16, 24, 32, 48, 64],
  fontWeights: {
    Regular: '400',
    Medium: '500',
    Bold: '700',
  },
};

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>

许可证

麻省理工学院