javascript - React Native 选择器占位符

Question

我有一个自定义的 iOS Picker Modal 组件，我想在其上添加占位符，有办法做到这一点吗？我的选择器是由 map 函数生成的，这是我的选择器代码

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

Answer 1

取消移动项目数组中的默认值和标签，然后在 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 >);
        }
}