View

Requires:

@ray-js/ray≥0.5.10

Description

Container component for page layout, supporting flex layout and custom styles; the fundamental block-level element for building pages.

Props

Property	Type	Required	Default	Description
`hoverClassName`	string	No	none	Class applied when pressed; set to none to disable the pressed state
`hoverStartTime`	number	No	20	How long to press before the pressed state appears, in milliseconds
`hoverStayTime`	number	No	70	Duration the pressed state remains after the finger is released, in milliseconds
`hoverable`	boolean	No	true	Whether to enable the touch-responsive hover style

Examples

Basic usage

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' }}>Tap the container</Text>
    </View>
  );
}

Flex layout

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/active state

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 (opacity decreases on press)</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' }}>
          Custom hover (appears after 100ms delay, stays for 300ms)
        </Text>
      </View>
    </View>
  );
}