PickerViewColumn

版本要求:

@ray-js/ray≥0.5.10

描述

滚动选择器子项，仅可放置于 PickerView 中，高度自动与选中框一致。

示例代码

基础用法

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

export default function () {
  const [current, setCurrent] = React.useState([0]);
  const range = ['巴西', '中国', '日本', '美国'];

  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>
  );
}

多列使用

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 = ['广东', '浙江', '江苏', '北京'];
  const cities = ['深圳', '广州', '东莞', '佛山'];

  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>
  );
}