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

ehdns1133님의 프로필 이미지

작성한 질문수

따라하며 배우는 리액트 네이티브 기초

InputForm 생성하기

InputForm 생성하기에서 TextInput과 Pressable이 보이지 않아요.

작성

·

66

0

 레이아웃 표시를 했을때, 위치는 잡히는 것 같지만 시각적으로 전혀 보이지 않아요. 마치 뒤에 가려진 것 처럼요

 

// InputForm.js

import { KeyboardAvoidingView, Platform, Pressable, StyleSheet, Text, TextInput, View } from 'react-native'
import React from 'react'

const InputForm = () => {
  return (

    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      style={styles.addFormContainer}>


      <TextInput
        style={styles.inputField}
        placeholder="할 일을 작성해주세요."
      />

      <Pressable style={styles.addButton}>
        <Text style={styles.addButtonText} >+</Text>
      </Pressable>

    </KeyboardAvoidingView>
  )
}

export default InputForm

const styles = StyleSheet.create({
  addFormContainer: {
    flexDirection: 'row',
    marginTop: 'auto',
    marginBottom: 30,
    paddingHorizontal: 20,
    backgroundColor: '#f7f8fa'
  },
  inputField: {
    flex: 1,
    height: 42,
    padding: 5,
    marginRight: 25,
    borderRadius: 4,
    borderColor: 'rgba(0, 0, 0, 0.2)',
    borderWidth: 1,
    color: '#000000',
    fontSize: 15,
    textAlignVertical: 'center'
  },
  addButton: {
    justifyContent: 'center',
    alignItems: 'center',
    width: 42,
    height: 42,
    borderRadius: 4,
    backgroundColor: 'rgba(0,0,0,0.7)',
    shadowColor: '#000000',
    shadowOpacity: 0.14,
    shadowRadius: 8,
    shadowOffset: {
      width: 0,
      height: 4
    }
  },
  addButtonText: {
    color: 'white',
    fontSize: 25
  },
})

 

// MainScreen.js

import { SafeAreaView, StyleSheet, Text, View, StatusBar, Platform } from 'react-native'
import React from 'react'
import InputForm from '../components/InputForm'

const MainScreen = () => {
  return (
    <View>
      <SafeAreaView style={styles.container}>
        <StatusBar barStyle={'default'} />
        <Text style={styles.pageTitle}>ToDo App</Text>
        <View style={styles.listView}>
          <Text style={styles.listTitle}>할 일</Text>
        </View>
        <View style={styles.separator} />
        <View style={styles.listView}>
          <Text style={styles.listTitle}>완료된 일</Text>
        </View>
        <InputForm />
      </SafeAreaView>
    </View>
  )
}

export default MainScreen

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Platform.OS = 'android' ? 20 : 0,
    backgroundColor: '#f7f8fa'
  },
  pageTitle: {
    marginBottom: 35,
    paddingHorizontal: 15,
    fontSize: 54,
    fontWeight: '600',
  },
  separator: {
    marginHorizontal: 10,
    marginTop: 25,
    marginBottom: 10,
    borderBottomWidth: 1,
    borderBottomColor: 'rgba(0,0,0,0.2)'
  },
  listView: {
    flex: 1,
  },
  listTitle: {
    marginBottom: 25,
    paddingHorizontal: 15,
    fontSize: 41,
    fontWeight: '500',
  }
})

 

// App.js

import { StyleSheet, Text, View } from 'react-native';
import MainScreen from './screens/MainScreen';

export default function App() {
  return (
    <View style={styles.container}>
      <MainScreen />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'flex-start',
    justifyContent: 'center',
  },
});

 

 

// package.json

{
  "name": "awesomeproject",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "^51.0.27",
    "expo-status-bar": "~1.12.1",
    "react": "18.2.0",
    "react-native": "0.74.5"
  },
  "devDependencies": {
    "@babel/core": "^7.24.0"
  },
  "private": true
}

 

답변 1

0

인프런 AI 인턴님의 프로필 이미지

2024. 08. 16. 17:16

안녕하세요, 인프런 AI 인턴입니다.

ehdns1133님의 코드를 살펴봤을 때, TextInput과 Pressable이 시각적으로 보이지 않는 문제는 InputForm의 스타일과 위치 배치 때문인 것 같습니다. 입력한 코드 대로라면, 모두 정상적으로 작동하는 것으로 보이지만, 몇 가지 확인해보실 사항을 말씀드리겠습니다.

  1. 스타일 충돌: InputForm 내의 TextInputPressable의 스타일이 예상과 다르게 적용되고 있는지 확인해보세요. 특히, backgroundColor, color, borderColor 등 시각적 요소를 직접 제어하는 스타일 속성이 올바르게 적용되었는지 점검해보시는 것이 좋습니다.

  2. 레이아웃 배치: InputForm이 다른 컴포넌트 뒤에 가려지지 않았는지 살펴보세요. SafeAreaView, View 등의 레이아웃 컴포넌트의 flex 속성이나 zIndex 속성 등으로 인해 예상치 못한 배치가 되어있을 수 있습니다.

  3. 디바이스 특성 고려: Platform.OS를 사용하여 iOS와 Android에서의 동작 차이를 고려하셨는데, 특정 플랫폼에서만 발생하는 문제일 수도 있으니, 다양한 디바이스나 에뮬레이터에서 테스트해보는 것이 좋습니다.

  4. 메인 컨테이너 스타일: App.js에서 MainScreen을 감싸는 컨테이너에 alignItems: 'flex-start', justifyContent: 'center'로 설정되어 있습니다. 이는 내부 컴포넌트의 위치를 영향을 줄 수 있으니, 이 부분도 확인해보세요.

상기 사항들을 다시 한 번 점검해보시고, 여전히 문제가 해결되지 않는다면, ViewSafeAreaViewflex: 1 설정을 조정해보시는 것도 좋을 것 같습니다. 또한, 개발 환경에서 디버깅 도구를 활용하여 요소의 실제 렌더링 위치와 스타일을 직접 확인해보는 것도 문제를 해결하는 데 도움이 될 수 있습니다.