import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { YearPicker, MonthPicker, DayPicker } from 'react-dropdown-date';
import { StyleSheet, Image, View, Text, ScrollView, TextInput, Picker, TouchableOpacity } from 'react-native';
const TextAndInput = ({ text, placeholder, onChange }) => {
return (
<View style={styles.textInputContainer}>
<Text style={styles.inputLabel}>{text}</Text>
<TextInput onChangeText={ onChange } placeholder={placeholder} style={styles.input}/>
</View>
);
}
const MonthPickInput = ({ text, onChange }) => {
return (
<View style={styles.textInputContainer}>
<Text style={styles.inputLabel}>{text}</Text>
<Picker itemStyle={styles.pickerItem} onValueChange={onChange} mode="dialog" style={styles.picker}>
<Picker.Item label="January" value={1} />
<Picker.Item label="February" value={2} />
<Picker.Item label="March" value={3} />
<Picker.Item label="April" value={4} />
<Picker.Item label="May" value={5} />
<Picker.Item label="June" value={6} />
<Picker.Item label="July" value={7}/>
<Picker.Item label="August" value={8} />
<Picker.Item label="September" value={9} />
<Picker.Item label="October" value={1} />
<Picker.Item label="November" value={2} />
<Picker.Item label="December" value={3} />
</Picker>
</View>
)
}
const DayPickInput = ({ text, onChange }) => {
return (
<View style={styles.textInputContainer}>
<Text style={styles.inputLabel}>{text}</Text>
<Picker itemStyle={styles.pickerItem} onValueChange={onChange} mode="dialog" style={styles.picker}>
<Picker.Item label="1" value={1}/>
<Picker.Item label="2" value={2}/>
<Picker.Item label="3" value={3}/>
<Picker.Item label="4" value={4}/>
<Picker.Item label="5" value={5}/>
<Picker.Item label="6" value={6}/>
<Picker.Item label="7" value={7}/>
<Picker.Item label="8" value={8}/>
<Picker.Item label="9" value={9}/>
<Picker.Item label="10" value={1}/>
<Picker.Item label="11" value={2}/>
<Picker.Item label="12" value={3}/>
<Picker.Item label="13" value={4}/>
<Picker.Item label="14" value={5}/>
<Picker.Item label="15" value={6}/>
<Picker.Item label="16" value={7}/>
<Picker.Item label="17" value={8}/>
<Picker.Item label="18" value={9}/>
<Picker.Item label="19" value={1}/>
<Picker.Item label="20" value={2}/>
<Picker.Item label="21" value={3}/>
<Picker.Item label="22" value={4}/>
<Picker.Item label="23" value={5}/>
<Picker.Item label="24" value={6}/>
<Picker.Item label="25" value={7}/>
<Picker.Item label="26" value={8}/>
<Picker.Item label="27" value={9}/>
<Picker.Item label="28" value={1}/>
<Picker.Item label="29" value={2}/>
<Picker.Item label="30" value={3}/>
<Picker.Item label="31" value={4}/>
</Picker>
</View>
)
}
const YearPickInput = ({ text, onChange }) => {
return (
<View style={styles.textInputContainer}>
<Text style={styles.inputLabel}>{text}</Text>
<Picker itemStyle={styles.pickerItem} onValueChange={onChange} mode="dialog" style={styles.picker}>
<Picker.Item label="2020" value={4} />
<Picker.Item label="2019" value={3} />
<Picker.Item label="2018" value={2} />
<Picker.Item label="2017" value={1} />
<Picker.Item label="2016" value={9} />
<Picker.Item label="2015" value={8} />
<Picker.Item label="2014" value={7} />
<Picker.Item label="2013" value={6} />
<Picker.Item label="2012" value={5} />
<Picker.Item label="2011" value={4} />
<Picker.Item label="2010" value={3} />
<Picker.Item label="2009" value={2} />
<Picker.Item label="2008" value={1} />
<Picker.Item label="2007" value={9} />
<Picker.Item label="2006" value={8} />
<Picker.Item label="2005" value={7} />
<Picker.Item label="2004" value={6} />
<Picker.Item label="2003" value={5} />
<Picker.Item label="2002" value={4} />
<Picker.Item label="2001" value={3} />
<Picker.Item label="2000" value={2} />
<Picker.Item label="1999" value={1} />
<Picker.Item label="1998" value={9} />
<Picker.Item label="1997" value={8} />
<Picker.Item label="1996" value={7} />
<Picker.Item label="1995" value={6} />
<Picker.Item label="1994" value={5} />
<Picker.Item label="1993" value={4} />
<Picker.Item label="1992" value={3} />
<Picker.Item label="1991" value={2} />
<Picker.Item label="1990" value={1} />
<Picker.Item label="1989" value={9} />
<Picker.Item label="1988" value={8} />
<Picker.Item label="1987" value={7} />
<Picker.Item label="1986" value={6} />
<Picker.Item label="1985" value={5} />
<Picker.Item label="1984" value={4} />
<Picker.Item label="1983" value={3} />
<Picker.Item label="1982" value={2} />
<Picker.Item label="1981" value={1} />
<Picker.Item label="1980" value={9} />
<Picker.Item label="1979" value={8} />
<Picker.Item label="1978" value={7} />
<Picker.Item label="1977" value={6} />
<Picker.Item label="1976" value={5} />
<Picker.Item label="1975" value={4} />
<Picker.Item label="1974" value={3} />
<Picker.Item label="1973" value={2} />
<Picker.Item label="1972" value={1} />
<Picker.Item label="1971" value={9} />
<Picker.Item label="1970" value={1} />
<Picker.Item label="1969" value={2} />
<Picker.Item label="1968" value={3} />
<Picker.Item label="1967" value={4} />
<Picker.Item label="1966" value={5} />
<Picker.Item label="1965" value={6} />
<Picker.Item label="1964" value={7} />
<Picker.Item label="1963" value={8} />
<Picker.Item label="1962" value={9} />
<Picker.Item label="1961" value={1} />
<Picker.Item label="1960" value={2} />
<Picker.Item label="1959" value={3} />
<Picker.Item label="1958" value={4} />
<Picker.Item label="1957" value={5} />
<Picker.Item label="1956" value={6} />
<Picker.Item label="1955" value={7} />
<Picker.Item label="1954" value={8} />
<Picker.Item label="1953" value={9} />
<Picker.Item label="1952" value={1} />
<Picker.Item label="1951" value={2} />
<Picker.Item label="1950" value={3} />
</Picker>
</View>
)
}
const RegisterButton = ({title, color, onPress, width }) => {
return (
<View style={{ flex: 1}}>
<TouchableOpacity onPress = { onPress } style = {styles.registerButton}>
<Text style = {styles.registerButtonText} > { title } </Text>
</TouchableOpacity>
</View>
);
}
function Register({ changePage }) {
const [ username, updateUsername ] = useState('');
const [ password, updatePassword ] = useState('');
const [ firstName, updateFirstName ] = useState('');
const [ lastName, updateLastName ] = useState('');
const [ month, updateMonth ] = useState('');
const [ day, updateDay ] = useState('');
const [ year, updateYear ] = useState('');
return (
<ScrollView style={styles.container}>
<TextAndInput text="Create a username. This is the name that others will see you as publicly." placeholder="Username" onChange={() => updateUsername(username)} />
<TextAndInput text="Create a secure password." placeholder="Password" onChange={() => updatePassword(password)} />
<TextAndInput text="Enter your first name. This will help calculate your numerology. This name will not be shown publicly." placeholder="First Name" onChange={() => updateFirstName(firstName)} />
<TextAndInput text="Enter your last name. This will help calculate your numerology. This name will not be shown publicly." placeholder="Last Name" onChange={() => updateLastName(lastName)} />
<MonthPickInput text="Enter the month that you were born." onChange={() => this.updateMonth(v)} />
<DayPickInput text="Enter the day that you were born." onChange={() => this.updateDay()} />
<YearPickInput text="Enter the year that you were born." onChange={() => this.updateYear()} />
<RegisterButton onPress = {() => changePage("account") } title="Register" />
</ScrollView>
)
};
export default Register;
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
paddingVertical: 15,
paddingHorizontal: 30
},
textInputContainer: {
flex: 1,
marginVertical: 10,
},
input: {
height: 50,
flex: 1,
flexShrink: 0,
paddingHorizontal: 20,
marginHorizontal: 10,
color: 'black',
marginVertical: 10,
alignItems: 'center',
backgroundColor: '#eee',
justifyContent: 'center',
fontSize: 20,
borderRadius: 50
},
inputLabel: {
fontSize: 16,
paddingHorizontal: 20
},
registerButton: {
height: 50,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'black',
borderRadius: 50,
marginVertical: 50,
marginHorizontal: 30
},
registerButtonText: {
fontSize: 20,
color: "white",
},
picker: {
marginVertical: 10,
marginHorizontal: 30,
},
pickerItem: {
fontSize: 20,
paddingHorizontal: 20,
height: 50,
}
});
Когда я выбираю элемент из компонента Picker, я получаю
TypeError: undefined не является объектом (оценка '_this.updatedMonth')
Это сообщение об ошибке будет применяться ко всем визуализированным компонентам выбора.
Это проблема с тем, как инициализируются мои состояния? Это проблема со значениями Picker.Items, являющимися целыми числами? Это ошибка с тем, как функция передается компоненту?
Может ли кто-нибудь помочь мне понять, почему я получаю эту ошибку, чтобы я знал, как правильно это сделать в будущем.
Спасибо.