View

版本要求:

@ray-js/ray≥0.5.10

描述

用于页面布局的容器组件，支持 flex 布局、自定义样式等，是构建页面的基础块级元素。

属性

属性	类型	必填	默认值	说明
`hoverClassName`	string	否	none	指定按下去的样式类；为 none 时没有点击态效果
`hoverStartTime`	number	否	20	按住后多久出现点击态，单位毫秒
`hoverStayTime`	number	否	70	手指松开后点击态保留时间，单位毫秒
`hoverable`	boolean	否	true	是否启用可触摸响应的 hover 样式

示例代码

基础用法

import React from 'react';
import { View, Text } from '@ray-js/ray';

export default function BasicView() {
  return (
    <View
      style={{
        height: '120rpx',
        backgroundColor: '#e67d1b',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
      onTouchStart={() => console.log('touch start')}
      onTouchEnd={() => console.log('touch end')}
      onClick={() => console.log('click')}
    >
      <Text style={{ color: '#fff' }}>点击容器</Text>
    </View>
  );
}

Flex 布局

import React from 'react';
import { View, Text } from '@ray-js/ray';

export default function FlexView() {
  return (
    <View
      style={{
        display: 'flex',
        flexDirection: 'row',
        width: '100%',
      }}
    >
      <View
        style={{
          flex: 1,
          height: '120rpx',
          backgroundColor: '#e67d1b',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          marginRight: '10rpx',
        }}
        onClick={() => console.log('A')}
      >
        <Text style={{ color: '#fff' }}>A</Text>
      </View>
      <View
        style={{
          flex: 1,
          height: '120rpx',
          backgroundColor: '#e67d1b',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        }}
        onClick={() => console.log('B')}
      >
        <Text style={{ color: '#fff' }}>B</Text>
      </View>
    </View>
  );
}

Hover 点击态

import React from 'react';
import { View, Text } from '@ray-js/ray';

export default function HoverView() {
  return (
    <View style={{ padding: '20rpx' }}>
      <View
        hoverable
        style={{
          height: '100rpx',
          backgroundColor: '#e67d1b',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          marginBottom: '20rpx',
        }}
      >
        <Text style={{ color: '#fff' }}>hoverable（按下透明度降低）</Text>
      </View>
      <View
        hoverable
        hoverClassName="custom-hover"
        hoverStartTime={100}
        hoverStayTime={300}
        style={{
          height: '100rpx',
          backgroundColor: '#1890ff',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <Text style={{ color: '#fff' }}>
          自定义 hover（延迟 100ms 出现，保留 300ms）
        </Text>
      </View>
    </View>
  );
}