인프런 커뮤니티 질문&답변

계산기 앱 개발과 마찬가지로, 다음과 같은 프로젝트 설치 및 실행을 진행하였습니다.
<기종 : Android>

1. npx create-expo-app <앱 이름> --template

2. 세 번째(blank) :typescript 선택

3. npx expo start를 실행

4. expo 앱에서 QR 코드로 보기

이전 강의(레이아웃 구성하기)의 중간(7:23)에 나오는 텍스트 창을 클릭하면 UI가 따라 올라가는 것을 방지하기 위한 설정방법이 제 것에서는 나타나지 않았습니다.

검색 창에 windowsoftinputmode 또는 AndroidManifest를 검색해도 나타나지 않았습니다.
(아무래도, 제가 설치를 잘못해서 나타났거나 expo로 빌드했기에 나타나지 않는 것 같습니다. VSCode는 기존에 사용했던 터라 해당되지 않는 것 같습니다.)

이를 해결하기 위해,
Picker를 감싸고 있는 View를 Wrapper라고 이름을 변경한 후에, postion: absolute 속성을 부여했습니다.

+) 텍스트 입력 글자가 꽤 길어지면, 줄바꿈이 되지 않고 글자가 잘려나가는 현상이 있습니다. 이를 해결하는 방법으로는 multiline={true}를 추가해주면 됩니다.

코드는 아래와 같습니다.

import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { Text, TextInput, View, Dimensions } from 'react-native';
import Translator from 'react-native-translator';
import styled from 'styled-components/native';
import { Picker } from '@react-native-picker/picker';

const Container = styled.View`
  background-color: #181818;
  flex: 1;
  padding-top: 20px;
`;

const Wrapper = styled.View`
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  padding-horizontal: 10px;
`;

const InputView = styled.View`
  background-color: #606060;
  height: 250px;
  justify-content: left;
  align-items: start;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 80px;
`;

const ResultView = styled(InputView)`
  background-color: #0084ff;
  margin-bottom: 10px;
`;

const App = () => {
  const [value, setValue] = useState('');
  const [result, setResult] = useState('');
  const [fromLang, setFromLang] = useState('en');
  const [toLang, setToLang] = useState('ko');

  return (
    <Container>
      <StatusBar style="light" />
      <Translator
        from={fromLang}
        to={toLang}
        value={value}
        onTranslated={(t) => setResult(t)}
      />
      <Wrapper>
        <Picker
          style={{ marginBottom: 10, backgroundColor: '#606060' }}
          selectedValue={fromLang}
          onValueChange={(itemValue) => setFromLang(itemValue)}
        >
          <Picker.Item label="한국어" value="ko" />
        </Picker>

        <InputView>
          <TextInput
            style={{ fontSize: 24, color: 'white' }}
            value={value}
            onChangeText={(t) => setValue(t)}
            multiline={true}
            placeholder="번역할 텍스트 입력"
          />
        </InputView>

        <Picker
          style={{ marginBottom: 10, backgroundColor: '#0084ff' }}
          selectedValue={toLang}
          onValueChange={(itemValue) => setToLang(itemValue)}
        >
          <Picker.Item label="영어" value="en" />
        </Picker>

        <ResultView>
          <Text style={{ fontSize: 24, color: 'white' }}>{result}</Text>
        </ResultView>
      </Wrapper>
    </Container>
  );
};

export default App;

ps) 간혹 글자를 입력하면 즉각 번역되지 않고, 번역되는 아래쪽 Picker를 클릭한 후에야 동작하긴 합니다. 이를 해결하기 위해서는 useEffect를 사용하면 해결되지만 강의에서는 다루지 않아 코드에 반영하지 않았습니다. GPT가 잘 알려주니까 궁금하신 분들은 해보시면 좋을 것 같습니다~

ps) 업데이트 하시면서, 영상이 잘못배치된 것 같습니다~ 번역앱 원리와 이해 부분에 코인에 관한 영상이 재생됩니다. 코인 관련, 날씨앱에서는 이상이 없었습니다~

좋은 강의 감사합니다~!! 덕분에 많은 도움이 되고 있습니다.