[英]React Native Picker Placeholder
我有一个自定义的 iOS 选择器模态组件,我想在它上面添加占位符,有什么办法吗? 我的选择器是由 map function 生成的,这是我的选择器代码
class PickerWrapper extends React.Component { constructor(props) { super(props); this.state = { type_absen: '', modal: false } } render() { let picker; let iosPickerModal = ( <Modal isVisible={this.state.modal} hideModalContentWhileAnimating={true} backdropColor={color.white} backdropOpacity={0.9} animationIn="zoomInDown" animationOut="zoomOutUp" animationInTiming={200} animationOutTiming={200} onBackButtonPress={() => this.setState({ modal: false })} onBackdropPress={() => this.setState({ modal: false })} > <View style={{ backgroundColor: color.white, width: 0.9 * windowWidth(), height: 0.3 * windowHeight(), justifyContent: 'center' }}> <Picker selectedValue={this.state.type_absen} onValueChange={(itemValue, itemIndex) => { this.setState({ type_absen: itemValue }); this.setState({ modal: false }); setTimeout(() => this.props.onSelect(itemValue), 1200); }} > {this.props.items.map((item, key) => <Picker.Item label={item.description} value={item.id} key={item.id} />)} </Picker> </View> </Modal>); if (Platform.OS === 'ios') { var idx = this.props.items.findIndex(item => item.id === this.state.type_absen); return ( <View style={this.props.style}> {iosPickerModal} <TouchableOpacity onPress={() => this.setState({ modal: true })}> <View style={{ flexDirection: 'row', height: this.props.height? this.props.height: normalize(40), width: this.props.width? this.props.width: 0.68 * windowWidth(), borderWidth: 1, borderColor: color.blue, alignItems: 'center', borderRadius: 5 }}> <Text style={{ fontSize: fontSize.regular, marginRight: 30 }}> {idx?== -1. this.props.items[idx]:description. this.state.type_absen}</Text> <IconWrapper name='md-arrow-dropdown' type='ionicon' color={color.light_grey} size={20} onPress={() => this:setState({ modal: true })} style={{ position, 'absolute': right; 10 }} /> </View> </TouchableOpacity> </View >); } }
在 items 数组中取消移位默认值和 label 然后在 onValueChange 中检查它
iosPickerModal = () => {
let makeitems = this.props.items;
// unshift defualt value and label
makeitems.unshift({
label: 'Please select an option...',
value: '-1',
});
return (
<Modal isVisible={this.state.modal} hideModalContentWhileAnimating={true} backdropColor={color.white} backdropOpacity={0.9} animationIn="zoomInDown" animationOut="zoomOutUp" animationInTiming={200} animationOutTiming={200} onBackButtonPress={() => this.setState({ modal: false })} onBackdropPress={() => this.setState({ modal: false })} >
<View style={{ backgroundColor: color.white, width: 0.9 * windowWidth(), height: 0.3 * windowHeight(), justifyContent: 'center' }}>
<Picker
selectedValue={this.state.type_absen}
onValueChange={(itemValue, itemIndex) => {
if (itemValue === '-1') return null;
this.setState({ type_absen: itemValue });
this.setState({ modal: false });
setTimeout(() => this.props.onSelect(itemValue), 1200);
}}
>
{makeitems.map((item, key) => <Picker.Item label={item.description} value={item.id} key={item.id} />)}
</Picker>
</View>
</Modal>)
};
render(){
if (Platform.OS === 'ios') {
var idx = this.props.items.findIndex(item => item.id === this.state.type_absen);
return (
<View style={this.props.style}>
{this.iosPickerModal}
<TouchableOpacity onPress={() => this.setState({ modal: true })}>
<View style={{ flexDirection: 'row', height: this.props.height ? this.props.height : normalize(40), width: this.props.width ? this.props.width : 0.68 * windowWidth(), borderWidth: 1, borderColor: color.blue, alignItems: 'center', borderRadius: 5 }}>
<Text style={{ fontSize: fontSize.regular, marginRight: 30 }}> {idx !== -1 ? this.props.items[idx].description : this.state.type_absen}</Text>
<IconWrapper name='md-arrow-dropdown' type='ionicon' color={color.light_grey} size={20} onPress={() => this.setState({ modal: true })} style={{ position: 'absolute', right: 10 }} />
</View>
</TouchableOpacity>
</View >);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.