Question

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

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

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

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

警告：propType失败：必需的道具onDateChange没有   在RCTDatePicker中指定。检查渲染方法   DatePickerIOS。

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

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

Answer 1

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

当时为我工作的一个小黑客是修改DatePickerIOS.ios.js 中的render方法（位于node_modules / react-native / Libraries / Components / DatePicker中）。

道具在那里调用getTime（）函数，该函数返回一个数字并最终抛出该警告。我摆脱了getTime调用，只是自己离开了属性，并且在正确保存数据时警告消失了。

希望有所帮助！

Answer 2

它看起来像一个RN bug。我试过了，得到了同样的结果。我已就此开了一个Github问题。您可以跟踪here。一旦问题解决，我就会编辑答案。

Answer 3

我们不能同时使用占位符和默认值，可能是您一次写了两者，我删除了其中的一个并且对我有用。在此处输入图片描述

Screenshot of mobile screen

支持React Native中的DatePickerIOS问题

3 个答案: