React Native中DatePickerIOS的道具问题

Question

我在模式中使用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警告。

警告：失败的proType：无效的propdate类型的Number提供给RCTDatePicker，Date的预期实例。检查DatePickerIOS的渲染方法。

警告：失败的propType:未在RCTDatePicker中指定所需的proponDateChange。检查DatePickerIOS的渲染方法。

警告：propType失败：提供给RCTDatePicker的类型为Number的propminimumDate无效，应为日期的实例。检查DatePickerIOS的渲染方法。

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




Answer 1

我们不能同时使用占位符和默认值，可能是你一次写两个，我已经删除了其中一个，它对我有效。在这里输入图像描述

手机屏幕截图

Answer 2

它看起来像一个RN错误。我试过了，得到了同样的结果。我已经打开了一个Github问题。你可以在这里追踪它。一旦问题解决，我将编辑答案。

Answer 3

不久前我遇到了这个问题。我认为已经有几个问题需要团队解决，不确定他们是否解决了。我使用的是RN 0.16.0，所以现在可能已经修复了。

当时对我有用的一个小技巧是修改DatePickerIOS中的render方法。网间网操作系统。js（位于节点\模块/react native/Libraries/Components/DatePicker中）。

那里的道具调用getTime（）函数，该函数返回一个数字并最终抛出该警告。我放弃了getTime调用，只保留了属性本身，在正确保存数据时警告消失了。

希望有帮助！