구름ide로 사지방에서 앱개발 4. 인풋 전면수정 datetime-picker-model

바뀌기 전 코드

import React, { useState, useEffect } from 'react'; 
import { StyleSheet, View, Text, Button, TextInput } from 'react-native'; 
import { NavigationContainer } from '@react-navigation/native'; 
import { createNativeStackNavigator } from '@react-navigation/native-stack'; 
import StartDayButton from "./StartDayButton"; 
import StartDay from "./StartDay"; 
import FinishDayButton from "./FinishDayButton"; 
import MainScreen from "./MainScreen"; 

const Stack = createNativeStackNavigator(); 

function FormScreen ({ navigation }) { 
const [startDay, setStartDay] = useState(0); 
const [finishDay, setFinishDay] = useState(0); 
const [startTime, onChangeStartTime] = useState(0); 
const [time, onChangeTime] = useState(0); 
const [cycle, onChangeCycle] = useState(0); 

 return ( 
<View style={styles.container}> 
<Text>근무일자를 선택하세요</Text> 
<StartDayButton day={"시작날짜"} setStartDay={setStartDay}></StartDayButton> 
<FinishDayButton day={"끝나는날짜"} setFinishDay={setFinishDay}></FinishDayButton> 
<Text>시작시간을 입력하세요</Text> 
<StartDay /> 
<TextInput 
style={styles.input} 
onChangeText={onChangeStartTime} 
value={startTime} 
placeholder="몇시?" 
keyboardType="numeric" 
 /> 
<Text>근무시간을 선택하세요</Text> 
<TextInput 
style={styles.input} 
onChangeText={onChangeTime} 
value={time} 
placeholder="몇시간?" 
keyboardType="numeric" 
 /> 
<Text>몇교대인지 선택하세요</Text> 
<TextInput 
style={styles.input} 
onChangeText={onChangeCycle} 
value={cycle} 
placeholder="몇교대?" 
keyboardType="numeric" 
 /> 
<Button 
style={styles.button} 
title="확인" 
onPress={() => navigation.navigate('Main', { 
startDay: startDay, 
finishDay: finishDay, 
startTime: startTime, 
time: time, 
cycle: cycle, 
}) 
} 
/> 
</View> 
 ); 
} 

const Navigation = () => { 
return ( 
<NavigationContainer> 
<Stack.Navigator 
initialRouteName="Form" 
screenOptions={{ 
headerStyle: { 
backgroundColor: '#003300', 
}, 
headerTintColor: '#fff', 
headerTitleStyle: { 
 fontWeight: 'bold', 
}, 
}} 
> 
<Stack.Screen 
name="Form" 
component={FormScreen} 
options={{ title: '근무계산기' }} 
 /> 
<Stack.Screen 
name="Main" 
component={MainScreen} 
options={{ title: '당신의 근무표' }} 
/> 
</Stack.Navigator> 
</NavigationContainer> 
) 
} 

export default Navigation; 

const styles = StyleSheet.create({ 
 container: { 
flex: 1, 
backgroundColor: '#fff', 
alignItems: 'center', 
justifyContent: 'center', 
padding: 30, 
 }, 
 button: { 
backgroundColor: 'blue', 
padding: 20, 
borderRadius: 5, 
 }, 
 buttonText: { 
fontSize: 20, 
color: '#fff', 
 }, 
 calendar: { 
 borderBottomWidth: 1, 
 borderBottomColor: '#e0e0e0', 
 }, 
input: { 
height: 40, 
margin: 12, 
borderWidth: 1, 
 }, 
 dateText: { 
 margin: 16, 
 }, 
}); 

오늘은 date-time-picker-model을 이용하여서 input 받는 부분을 전면 수정했다.
데이트와 시간 format하는 부분은 스택 오버 플로우를 참고하였다. 그리고 여러 가지 선택지를 중에 선택하는 부분이 있었는데 이 부분은 블로그를 참고로 하였다.

https://stackoverflow.com/questions/67366849/how-to-format-the-date-and-time-from-a-date-time-picker

How to format the date and time from a date time picker

https://taehoon95.tistory.com/116

[React Native] PickerSelect 사용하기 (datepicker)

상태 관리하는 부분이 고민되었는데, React 기본 기능을 사용하기로 했다. (props넘기기)

마지막으로 해당 라이브러리의 자세한 설명은 github 링크를 통해 볼 수 있다.
https://github.com/react-native-datetimepicker/datetimepicker

GitHub - react-native-datetimepicker/datetimepicker: React Native date & time picker component for iOS, Android and Windows