PickerView

Requires:

@ray-js/ray≥0.5.10

Description

An in-page scrolling picker. Only PickerViewColumn components can be placed inside; other nodes will not be displayed.

Props

Property	Type	Required	Default	Description
`value`	number[]	No	-	The numbers in the array indicate, in order, which item is selected in each picker-view-column within the picker-view (index starts at 0). If a number exceeds the number of options in a picker-view-column, the last item is selected.
`indicatorStyle`	string \| any	No	-	Set the style of the selector’s center selection box (object or CSS declaration string)
`maskStyle`	string \| any	No	-	Set the overlay style (object or CSS declaration string)
		No	-	Triggered during scrolling selection
		No	-	Triggered when scrolling selection starts
		No	-	Triggered when scrolling selection ends

Examples

Basic usage

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

export default function () {
  const [current, setCurrent] = React.useState([0]);
  const range = ['Brazil', 'China', 'Japan', 'United States'];

  return (
    <View style={{ padding: '20px' }}>
      <Text>当前选择: {range[current[0]]}</Text>
      <PickerView
        onChange={(e) => {
          console.log('Selection changed:', e.detail.value);
          setCurrent(e.value);
        }}
        value={current}
        style={{ height: '200px', marginTop: '10px' }}
      >
        <PickerViewColumn>
          {range.map((item, index) => (
            <View key={index} style={{ textAlign: 'center', lineHeight: '36px' }}>
              {item}
            </View>
          ))}
        </PickerViewColumn>
      </PickerView>
    </View>
  );
}

Multi-column selection

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

export default function () {
  const [current, setCurrent] = React.useState([0, 0, 0]);

  const years = ['2020', '2021', '2022', '2023', '2024'];
  const months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
  const days = Array.from({ length: 31 }, (_, i) => String(i + 1).padStart(2, '0'));

  return (
    <View style={{ padding: '20px' }}>
      <Text>
        当前日期: {years[current[0]]}-{months[current[1]]}-{days[current[2]]}
      </Text>
      <PickerView
        onChange={(e) => {
          console.log('Date changed:', e.detail.value);
          setCurrent(e.detail.value);
        }}
        value={current}
        style={{ height: '200px', marginTop: '10px' }}
        onPickstart={() => console.log('Start scrolling')}
        onPickend={() => console.log('End scrolling')}
      >
        <PickerViewColumn>
          {years.map((item, index) => (
            <View key={index} style={{ textAlign: 'center', lineHeight: '36px' }}>{item}</View>
          ))}
        </PickerViewColumn>
        <PickerViewColumn>
          {months.map((item, index) => (
            <View key={index} style={{ textAlign: 'center', lineHeight: '36px' }}>{item}</View>
          ))}
        </PickerViewColumn>
        <PickerViewColumn>
          {days.map((item, index) => (
            <View key={index} style={{ textAlign: 'center', lineHeight: '36px' }}>{item}</View>
          ))}
        </PickerViewColumn>
      </PickerView>
    </View>
  );
}