rc-mobile-picker v1.0.0

rc-mobile-picker

安装

npm i rc-mobile-picker

使用

let count = 0;
const len = 10;

class Test extends React.Component {
  state = {
    value: ['1', '11'],
  };

  onChange = (value) => {
    console.log('onChange', value);
    this.setState({
      value,
    });
  }

  onScrollChange = (value) => {
    console.log('onScrollChange', value);
  }

  render() {
    return (
      <div style={{ background: '#f5f5f9', padding: 10 }}>
        <MultiPicker
          selectedValue={this.state.value}
          onValueChange={this.onChange}
          onScrollChange={this.onScrollChange}
        >
          <Picker indicatorClassName="my-picker-indicator">
            <Picker.Item className="my-picker-view-item" value="1">one</Picker.Item>
            <Picker.Item className="my-picker-view-item" value="2">two</Picker.Item>
            <Picker.Item className="my-picker-view-item" value="3">three</Picker.Item>
            <Picker.Item className="my-picker-view-item" value="4">four</Picker.Item>
            <Picker.Item className="my-picker-view-item" value="5">five</Picker.Item>
            <Picker.Item className="my-picker-view-item" value="6">six</Picker.Item>
            <Picker.Item className="my-picker-view-item" value="7">seven</Picker.Item>
            <Picker.Item className="my-picker-view-item" value="8">eight</Picker.Item>
          </Picker>
          <Picker indicatorClassName="my-picker-indicator">
            <Picker.Item className="my-picker-view-item" value="11">eleven</Picker.Item>
            <Picker.Item className="my-picker-view-item" value="12">twelve</Picker.Item>
            <Picker.Item className="my-picker-view-item" value="13">thirteen</Picker.Item>
            <Picker.Item className="my-picker-view-item" value="14">fourteen</Picker.Item>
            <Picker.Item className="my-picker-view-item" value="15">fifteen</Picker.Item>
            <Picker.Item className="my-picker-view-item" value="16">sixteen</Picker.Item>
            <Picker.Item className="my-picker-view-item" value="17">seventeen</Picker.Item>
            <Picker.Item className="my-picker-view-item" value="18">eighteen</Picker.Item>
          </Picker>
        </MultiPicker>
      </div>
    );
  }
}

class PickerDemo extends React.Component {
  state = {
    disabled: false,
    items: this.getItems(count),
    value: `${count + len / 2}`,
  };

  onChange = (value) => {
    console.log('onChange', value);
    this.setState({
      value,
    });
  }

  onScrollChange = (value) => {
    console.log('onScrollChange', value);
  }

  disable = () => {
    this.setState({
      disabled: !this.state.disabled,
    });
  }

  getItems(start) {
    const items = [];
    for (let i = start; i < start + len; i++) {
      items.push(<Picker.Item value={i + ''} key={i}>
        {count} {i}
      </Picker.Item>);
    }
    return items;
  }

  rerender = () => {
    count += len;
    const items = this.getItems(count);
    this.setState({
      items,
      value: String(count),
    });
  }

  render() {
    return (
      <div style={{ background: '#f5f5f9', padding: 10 }}>
        <button onClick={this.rerender}>rerender</button>
        &nbsp;
        <button onClick={this.disable}>{this.state.disabled ? 'enable' : 'disable'}</button>
        <Picker
          selectedValue={this.state.value}
          disabled={this.state.disabled}
          onValueChange={this.onChange}
          onScrollChange={this.onScrollChange}
        >
          {this.state.items}
        </Picker>

        <div>
          <Test />
        </div>
      </div>
    );
  }
}


ReactDOM.render(<PickerDemo />, document.getElementById('app'));