Question

我正在尝试在React Native中使用DatePickerAndroid。

De功能如下：

showAndroidDatePicker = async () => {
        try {
            const {action, year, month, day} = await DatePickerAndroid.open({
                date: this.state.selectedValue
            });
            if (action !== DatePickerAndroid.dismissedAction) {
                var date = new Date(year, month, day);
                this.setState({selectedValue: date.toLocaleDateString()});
            }
        } catch ({code, message}) {
            console.warn('Cannot open date picker', message);
        }
    };

render功能如下：

render() {
        let numbers = [];
        for(var i=0; i<=this.props.max; i++) numbers.push((i + ''));
        return (
            <View>
                {this.renderModal()}
                <ItemDetail selectItem={this.selectItem.bind(this)} resetItem={this.resetItem.bind(this)} title={this.props.title} value={formatDate(this.props.value)} icon={this.props.icon} />
            </View>
        )
    }

渲染模态函数如下：

renderModal() {
        if(!this.state.itemPickerVisible) return;

        let datePicker = <DatePickerIOS date={this.state.selectedValue} mode="date" timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60} onDateChange={(date) => { this.setState({selectedValue: date})}} />;
        if (Platform.OS === "android"){
            datePicker = this.showAndroidDatePicker()
        }

        return(
            <Modal animationType="fade" transparent={true} visible={this.state.itemPickerVisible}>
                <View style={{flex: 1, flexDirection: 'column', justifyContent: 'flex-end'}}>
                    <View style={{flex: 1, backgroundColor: '#000', opacity: 0.4}}>
                    </View>
                    <View style={{backgroundColor: '#fff'}}>
                        <View style={{backgroundColor: '#ddd', flexDirection: 'row', justifyContent: 'space-between', padding: 7}}>
                            <Text style={{padding: 4}}>{this.props.title}</Text>
                            <TouchableHighlight onPress={this.selectedItem.bind(this)}>
                                <Text style={{padding: 4, color: s.colorDark}}>{gettext("Done")}</Text>
                            </TouchableHighlight>
                        </View>
                        <View>                            
                            {datePicker}
                        </View>
                    </View>
                </View>
            </Modal>
        )
    }

但是当需要呈现renderModal时，我收到错误：

Answer 1

如果Platform.OS === "android"，datePicker变量将包含showAndroidDatePicker返回的任何内容，目前不包含任何内容（实际为undefined）。要显示特定于平台的选取器，可以在模式中使用以下内容：

<View>
  {Platform.OS === 'ios' ?
    <DatePickerIOS date={this.state.selectedValue} mode="date" timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60} onDateChange={(date) => { this.setState({selectedValue: date})}} /> :
    null
  }
</View>

并调用showAndroidDatePicker，例如在componentDidMount。

Answer 2

您无法以这种方式呈现DatePickerAndroid。在你的代码中

datePicker = this.showAndroidDatePicker()

datePicker包含this.showAndroidDatePicker的执行结果，该结果不是有效元素。

相反，您应该在onClick或某些生命周期方法中调用您的方法，componentDidMount是一个调用甚至渲染的好地方

if (showDatePicker && Platform.OS !== 'ios') {
  this.showAndroidDatePicker()
}

如果要自定义视图，则需要使用某些库而不是本机选择器。

如何使用React Native DatePickerAndroid

2 个答案: