JS实现的底部弹出选择框,适用于Android和IOS双平
JS实现的底部弹出选择框,适用于Android和IOS双平台。可以高度自定义样式 JS implementation of the bottom pop-up selection box for Android and IOS dual platform.Can be highly customized.
Installnpm i react-native-custon-picker-avery --save Usage
弹窗ITEM布局可以自定义,样式也可自定义,可定制化程度较高。 You can customized picker layout and StyleSheet.
See SampleApp
for an example how to use this component.
import WheelPicker from 'react-native-custom-picker-avery'
[..]
class SampleApp extends Component {
constructor() {
super();
this.state = {
textInputValue: '',
data: [{text: 1}, {text: 2}, {text: 3}],
}
}
renderItem = (item, index) => (
<View>
<Text>item.text</Text>
</View>
);
render() {
return (
<View style={{flex:1, justifyContent:'space-around', padding:50}}>
<Text>显示picker</Text>
<WheelPicker
ref={wheelPicker => {
this.wheelPicker = wheelPicker;
}}
data={this.state.data}
renderItem={this.renderItem}
itemHeight={scaleSize(60)}
onChangeSelected={(item) => {
console.log('selectedItem: ', item.text);
}}
onConfirmTextClick={(item) => {
console.log('click confirm: ', item.text);
}}
/>
</View>
);
}
}
Props
data - []
required, array of objects with a unique key and label
style - object
optional, style definitions for the root element
onChange - function
optional, callback function, when the users has selected an option
initValue - string
optional, text that is initially shown on the button
cancelText - string
optional, text of the cancel button
selectStyle - object
optional, style definitions for the select element (available in default mode only!)
selectTextStyle - object
optional, style definitions for the select element (available in default mode only!)
overlayStyle - object
optional, style definitions for the overly/background element
sectionStyle - object
optional, style definitions for the section element
sectionTextStyle - object
optional, style definitions for the select text element
optionStyle - object
optional, style definitions for the option element
optionTextStyle - object
optional, style definitions for the option text element
cancelStyle - object
optional, style definitions for the cancel element
cancelTextStyle - object
optional, style definitions for the cancel text element
版权声明:
1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。2、网站不提供资料下载,如需下载请到原作者页面进行下载。