rc-mobile-picker
v1.0.0
Published
### 安装 ``` npm i rc-mobile-picker ```
Downloads
4
Maintainers
Readme
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>
<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'));