다이어리 앱을 만들면서 연습해보자. - Write 화면 구현하기

이전글

처음부터 다시 해보는 npx create-react-native-app dear-diary with ios 세팅! 나만의 프리셋

다이어리 앱을 만들면서 연습해보자. - 모듈설치 /Home / Write Screen

 다이어리 앱을 만들면서 연습해보자. - mongoDB 연동(Realm open/스키마 정의 하기)

Write 화면 구현하기 

write.js

• Emoticon 버튼 생성
• TextInput 키보드 입력 처리하기
• Emoticon 버튼 눌렀을 때, CSS 변경하기
• 키보드의 엔터 눌렀을 때, SAVE 버튼 눌렀을 때 처리하기 

      <Title>How do you feel now?</Title>
      <Emoticons>
        {emotions.map((emotion, index) => (
          <EmojiBtn
            selected={emotion === selectedEmotion}
            key={index}
            onPress={() => emotionPress(emotion)}
          >
            <Emoticon>{emotion}</Emoticon>
          </EmojiBtn>
        ))}
      </Emoticons>
      <TextInput
        onSubmitEditing={onSubmit}
        returnKeyLabel="done"
        returnKeyType="done"
        placeholder="Write your feelings..."
        onChangeText={onChangeText}
        value={feelings}
      ></TextInput>
      <Btn onPress={onSubmit}>
        <BtnText>Save</BtnText>
      </Btn>
    </Content>

전체 코드는 포스트 가장 아래쪽에 있습니다.

 

selected emotion 버튼에 css 추가하기 

 

	<Emotion
            selected={emotion === selectedEmotion}
            ...
        /Emotion>

Emotion 컴포넌트에 selected Prop 을 추가한다. 이때 emotion === selectedEmotion (나 자신이 선택되었다면 )true 값을 갖도록 한다. 

 

const Emotion = styled.TouchableOpacity`
  ...
  border-width: 1px;
  border-color: ${(props) =>
    props.selected ? "rgba(41, 30, 95, 1);" : "transparent"};
`;

Emotion 이 가지고있는 selected 가 true 인지 검사해서 border-width , border-color 을 줄 수 있다.

 

IOS 시뮬레이터 키보드 안보일 때 켜기 

Simulator > I/O > Keyboard > Connect Hardwear Keyboard

⌘ + SHIFT + K

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 30px;
`;
const Title = styled.Text`
  color: ${colors.textColor};
  margin: 50px 0px;
  text-align: center;
  font-size: 28px;
  font-weight: 500;
`;

const TextInput = styled.TextInput`
  background-color: white;
  border-radius: 20px;
  padding: 10px 20px;
  font-size: 18px;
  box-shadow: 1px 1px 3px rgba(41, 30, 95, 0.2);
`;
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);
  border-width: ${(props) => (props.selected ? "2px" : "0px")};
`;

const BtnText = styled.Text`
  color: white;
  align-items: center;
  border-radius: 20px;
  font-weight: 500;
  font-size: 18px;
`;
const Emotions = styled.View`
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 20px;
`;
const Emotion = styled.TouchableOpacity`
  background-color: white;
  box-shadow: 1px 1px 3px rgba(41, 30, 95, 0.2);
  padding: 10px;
  border-radius: 10px;
  border-width: 1px;
  border-color: ${(props) =>
    props.selected ? "rgba(41, 30, 95, 1);" : "transparent"};
`;
const EmotionText = styled.Text`
  font-size: 24px;
`;

const emotions = ["🤯", "🥲", "🤬", "🤗", "🥰", "😊", "🤩"];
const Write = () => {
  const [selectedEmotion, setEmotion] = useState(null);
  const [feelings, setFellings] = useState("");
  const onChangeText = (text) => setFellings(text);
  const onEmotionPress = (face) => setEmotion(face);
  const onSubmit = () => {
    if (feelings === "" || selectedEmotion === null) {
      return Alert.alert("Please complete form.");
    }
  };
  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
        returnKeyType="done"
        onSubmitEditing={onSubmit}
        onChangeText={onChangeText}
        value={feelings}
        placeholder="Write your feelings..."
      />
      <Btn onPress={onSubmit}>
        <BtnText onClick={onChangeText}>Save</BtnText>
      </Btn>
    </View>
  );
};
export default Write;

 

다음글

2023.02.17 - [개발로그/ReactNative] - 다이어리 앱을 만들면서 연습해보자. - context / realm.write() / 창 닫기