Не могу понять, использование RNDateTimePicker - PullRequest
Новая
       9

Не могу понять, использование RNDateTimePicker

0 голосов
/ 09 января 2020

Я пытаюсь создать мобильное приложение, которое состоит из поля для получения даты рождения. К сожалению, модуль DateTimePicker не дал мне вывод. Поскольку он говорит, что старый, я использовал 

<RNDateTimePicker mode="date" value={new Date()} />

в моей реализации. Он показывает выбор даты и времени, но я не могу получить его вывод в текстовое поле. Я был бы очень признателен, если бы вы могли предоставить мне пример использования RNDateTimePicker. Ниже приведен код, с которым я работаю. 

    import React from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity, Image } from 'react-native';
import RNDateTimePicker from '@react-native-community/datetimepicker';

export default class RegistrationForm extends React.Component {
    render() {
        return (
            <View style={styles.reg_form}>
                <TextInput style={styles.textinput} placeholder="Name you want us to call you" underlineColorAndroid={'transparent'} />
                {/* Field to put DOB */}
                <TextInput style={styles.textinput} placeholder="Date of birth" underlineColorAndroid={'transparent'} />
                {/* RNDateTimePicker */}
                <RNDateTimePicker mode="date" value={new Date()} />
                {/* need to populate the output of this datetimepicker in DOB inputText */}
                <TextInput style={styles.textinput} placeholder="email address" underlineColorAndroid={'transparent'} autoCompleteType="email" />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    reg_form: {
        flex: 1,
        alignSelf: 'stretch',
        paddingLeft: 50,
        paddingRight: 50,
        backgroundColor: '#fff',
        paddingTop: 100,
    },
    textinput: {
        alignSelf: 'stretch',
        height: 40,
        marginBottom: 20,
        borderColor: "#5d5959",
        borderBottomWidth: 1,
        color: "#5d5959"
    },
});

1 Ответ

1 голос
/ 09 января 2020

Вы должны поместить значение date в ваш state, чтобы вы могли обновить его с помощью обработчика событий и передать его компоненту RNDateTimePicker.

Затем в функции setDate(), вы обрабатываете событие и обновляете this.state.date с выбранным значением.

Например: 

export default class RegistrationForm extends React.Component {
    state = {
       date: new Date()
    }

    setDate = (event, date) => {
       date = date || this.state.date;

       this.setState({
          date
       });
    }

    render() {
        return (
            <View style={styles.reg_form}>
                <TextInput style={styles.textinput} placeholder="Name you want us to call you" underlineColorAndroid={'transparent'} />
                {/* Field to put DOB */}
                <TextInput style={styles.textinput} placeholder="Date of birth" underlineColorAndroid={'transparent'} value={this.state.date} />
                {/* RNDateTimePicker */}
                <RNDateTimePicker mode="date" value={this.state.date} onChange={this.setDate} />
                {/* need to populate the output of this datetimepicker in DOB inputText */}
                <TextInput style={styles.textinput} placeholder="email address" underlineColorAndroid={'transparent'} autoCompleteType="email" />
            </View>
        );
    }
}
...