react-native - React Native 中 DatePickerIOS 的 Prop 问题

Question

我在 Modal 中使用 DatePickerIOS 将所选日期返回到主页。

DateTimeController 组件

var DateTimeController = React.createClass({
    show: function () {
        this.setState({modalVisible: true});
    },
    getInitialState: function () {
        return {
            timeZoneOffsetInHours: this.props.timeZoneOffsetInHours,
            date: this.props.date,
            color: this.props.color || '#007AFF',
            minimumDate: this.props.minimumDate,
            modalVisible: false
        };
    },
    onDateChange: function (date) {
        this.setState({date: date});
    },
    cancelButtonPressed: function() {
        this.setState({modalVisible: false});
    },
    confirmButtonPressed: function() {
        if(this.props.onSubmit) this.props.onSubmit(this.state.date);
        this.setState({modalVisible: false});
    },
    render: function () {
        return (
            <Modal
                animated={true}
                transparent={true}
                visible={this.state.modalVisible}>
                <View style={styles.basicContainer}>
                    <View style={styles.modalContainer}>
                        <View style={styles.buttonView}>
                            <Button onPress={this.cancelButtonPressed} style={styles.timeSectionButtons}>&#xf057;</Button>
                            <Button onPress={this.confirmButtonPressed} style={styles.timeSectionButtons}>&#xf058;</Button>
                        </View>
                        <View style={styles.mainBox}>
                            <DatePickerIOS
                                date={this.state.date}
                                mode="datetime"
                                timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours}
                                onDateChange={this.onDateChange}
                                minimumDate={this.state.minimumDate}
                            />
                        </View>

                    </View>
                </View>
            </Modal>
        );
    }
});

组件的实现

getInitialState: function () {
    return {
        date: new Date(),
        timeZoneOffsetInHours: (-1) * (new Date()).getTimezoneOffset() / 60,
    };
},

onDateChange: function (date) {
    this.setState({date: date});
},

return (
    <View style={styles.mainContainer}>
        <Text
            style={styles.secondaryText}
            onPress={()=>{
            this.refs.picker.show();
        }}>
            {
                this.state.date.toLocaleDateString() +
                ' ' +
                this.state.date.toLocaleTimeString()
            }
        </Text>

        <DateTimeController ref={'picker'} timeZoneOffsetInHours={this.state.timeZoneOffsetInHours * 60}
                            date={this.state.date} minimumDate={new Date()}
                            onSubmit={(date)=>{
            this.setState({date: date})
        }}
        />
    <View>
);

当模式打开呈现 DatePickerIOS 时，我收到以下 YellowBox 警告。

Warning: Failed propType: Invalid prop date of type Number supplied to RCTDatePicker, expected instance of Date. Check the render method of DatePickerIOS.

Warning: Failed propType: Required prop onDateChange was not specified in RCTDatePicker. Check the render method of DatePickerIOS.

Warning: Failed propType: Invalid prop minimumDate of type Number supplied to RCTDatePicker, expected instance of Date. Check the render method of DatePickerIOS.

如何避免这些警告并解决这个问题？

Answer 1

我前段时间遇到了这个问题。我认为已经打开了几个问题，要求团队解决这个问题，但不确定他们是否这样做了。我使用的是 RN 0.16.0，所以它现在可能已经修复了。

当时对我有用的一个小 hack 是修改 DatePickerIOS.ios.js 中的渲染方法 (位于 node_modules/react-native/Libraries/Components/DatePicker)。

那里的 Prop 调用 getTime() 函数，该函数返回一个数字并最终抛出该警告。我摆脱了 getTime 调用，只保留属性本身，在正确保存数据时警告消失了。

希望对您有所帮助!