React-native(3.Diary_2_Home.js, Write.js)

1. Home.js

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에 미리 여러색을 셋팅해둠.

2. Write.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에 넣어줌

오늘도 재밌게 즐겁게 공부!!!!