React Native 中 DatePickerIOS 的 prop 问题答案

【问题标题】：prop issues with DatePickerIOS in React NativeReact Native 中 DatePickerIOS 的 prop 问题
【发布时间】：2016-03-03 05:41:08
【问题描述】：

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

日期时间控制器组件

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

当 Modal 打开渲染 DatePickerIOS 时，我收到以下 YellowBox 警告。

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

警告：失败的 propType：必需的 prop onDateChange 不是在RCTDatePicker 中指定。检查渲染方法 DatePickerIOS.

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

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

【问题讨论】：

标签： react-native

【解决方案1】：

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

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

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

希望有帮助！

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

我们不能同时使用占位符和默认值，可能是你同时写了两个，我删除了其中一个，它对我有用。在此处输入图片说明

Screenshot of mobile screen

【讨论】：

我的评论是一个隐含的请求，你用代码替换图像