import styled from 'styled-components/native'
import colors from '../colors'
import { Ionicons } from '@expo/vector-icons'
const View = styled.View`
flex: 1;
padding: 0px 50px;
padding-top: 100px;
background-color: ${colors.bgColor};
`
const Title = styled.Text`
color: ${colors.textColor};
font-size: 38px;
margin-bottom: 100px;
`
const Text = styled.Text``
const Btn = styled.TouchableOpacity`
position: absolute;
bottom: 50px;
right: 50px;
height: 80px;
width: 80px;
border-radius: 40px;
justify-content: center;
align-items: center;
background-color: ${colors.btnColor};
`
const BtnText = styled.Text`
color: white;
`
const Home = ({ navigation: { navigate } }) => (
<View>
<Title>My journal</Title>
<Btn onPress={() => navigate('Write')}>
<Ionicons name="pencil" color='white' size={40}/>
</Btn>
</View>
)
export default Home
check!!!
1){navigation:{navigate}} , onPress={()=>navigate('Write')}
를 코딩해서 클릭시 Write Page로 이동하게 한다.
color는 colors.js에 미리 여러색을 셋팅해둠.
import React, { useState } from 'react'
import { Alert } from 'react-native'
import styled from 'styled-components/native'
import colors from '../colors'
const View = styled.View`
background-color: ${colors.bgColor};
flex: 1;
padding: 0px 20px;
`
const Title = styled.Text`
color: ${colors.textColor};
margin: 50px 0px;
text-align: center;
font-size: 30px;
font-weight: 500;
`
const TextInput = styled.TextInput`
background-color: white;
border-radius: 10px;
padding: 10px 20px;
font-size: 18px;
`
const Btn = styled.TouchableOpacity`
width: 100%;
margin-top: 20px;
background-color: ${colors.btnColor};
padding: 10px 20px;
align-items: center;
border-radius: 20px;
box-shadow: 1px 1px 3px rgba(41, 30, 95, 0.2);
`
const BtnText = styled.Text`
color: white;
font-weight: 500;
font-size: 18px;
`
const Emotions = styled.View`
flex-direction: row;
margin-bottom: 20px;
justify-content: space-between;
`
const Emotion = styled.TouchableOpacity`
background-color: white;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
padding: 10px;
border-radius: 20px;
border-width: 2px;
border-color: ${(props) => (props.selected ? 'red' : 'white')};
overflow: hidden;
`
const EmotionText = styled.Text`
font-size: 24px;
`
const emotions = ['😊', '😂', '😅', '😡', '😱']
const Write = () => {
const [selectedEmotion, setEmotion] = useState(null)
const [feelings, setFeelings] = useState('')
const onChangeText = (text) => setFeelings(text)
const onEmotionPress = (face) => setEmotion(face)
const onSubmit = () => {
if (feelings === '' || selectedEmotion == null) {
return Alert.alert('Please complete form')
}
//save
}
console.log(feelings, selectedEmotion)
return (
<View>
<Title>How do you feel today?</Title>
<Emotions>
{emotions.map((emotion, index) => (
<Emotion
selected={emotion === selectedEmotion}
onPress={() => onEmotionPress(emotion)}
key={index}
>
<EmotionText>{emotion}</EmotionText>
</Emotion>
))}
</Emotions>
<TextInput
returnKeyLabel="save"
onSubmitEditing={onSubmit}
onChangeText={onChangeText}
value={feelings}
placeholder="Write your feeling"
/>
<Btn>
<BtnText onPress={onSubmit}>Save</BtnText>
</Btn>
</View>
)
}
export default Write
check!!
1) useState를 이용해 두개의 값, textInput, emoticon의 값을 세팅한다.
const [selectedEmotion, setEmotion] = useState(null)
const [feelings, setFeelings] = useState('')
2)
value={feelings}
=====>TextInput 의 value를 useState의 feelings로 지정해준다.
const onChangeText = (text) => setFeelings(text)
onChangeText={onChangeText}
TextInput값에 입력되는 값을 받아서 setFeelings에 담는다.
3)
const emotions = ['😊', '😂', '😅', '😡', '😱']
emotions에 사용될 이모티톤을 배열로 정해놓는다 (윈도우키 + . )
const onEmotionPress = (face) => setEmotion(face)
=>onPress를 하면 setEmotion에 이모티콘이 담길 함수를 만듬
<Emotions>
{emotions.map((emotion, index) => (
<Emotion
selected={emotion === selectedEmotion}
onPress={() => onEmotionPress(emotion)}
key={index}
>
<EmotionText>{emotion}</EmotionText>
</Emotion>
))}
</Emotions>
1)emotions.map 으로 이모티콘을 화면에 뿌려줌(~EmotionText>{emotion}</EmotionText~). index반드시 넣어줄것.
2)selected props를 만듬, styled에서 props받아서 선택되면 색깔 바꿔줌
border-color: ${(props) => (props.selected ? 'red' : 'white')};
3)onPress={onEmotionPress(emotion)} 으로 클릭된 이모티콘을 setEmotion에 넣어줌.
4)
const onSubmit = () => {
if (feelings === '' || selectedEmotion == null) {
return Alert.alert('Please complete form')
}
//save
}
onSubmit 함수 만들어서
<TextInput
returnKeyLabel="save"
onSubmitEditing={onSubmit}
onChangeText={onChangeText}
value={feelings}
placeholder="Write your feeling"
/>
<Btn>
<BtnText onPress={onSubmit}>Save</BtnText>
</Btn>
TextInput과 BtnText에 넣어줌
오늘도 재밌게 즐겁게 공부!!!!