PickerViewColumn

Requires:

@ray-js/ray≥0.5.10

Description

Scrolling picker subitem that can only be placed inside PickerView; its height automatically matches the selection box.

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) => 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 usage

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

export default function () {
  const [current, setCurrent] = React.useState([0, 0]);
  const provinces = ['Guangdong', 'Zhejiang', 'Jiangsu', 'Beijing'];
  const cities = ['Shenzhen', 'Guangzhou', 'Dongguan', 'Foshan'];

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