작성
·
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 인턴입니다.
ehdns1133님의 코드를 살펴봤을 때, TextInput과 Pressable이 시각적으로 보이지 않는 문제는 InputForm
의 스타일과 위치 배치 때문인 것 같습니다. 입력한 코드 대로라면, 모두 정상적으로 작동하는 것으로 보이지만, 몇 가지 확인해보실 사항을 말씀드리겠습니다.
스타일 충돌: InputForm
내의 TextInput
과 Pressable
의 스타일이 예상과 다르게 적용되고 있는지 확인해보세요. 특히, backgroundColor
, color
, borderColor
등 시각적 요소를 직접 제어하는 스타일 속성이 올바르게 적용되었는지 점검해보시는 것이 좋습니다.
레이아웃 배치: InputForm
이 다른 컴포넌트 뒤에 가려지지 않았는지 살펴보세요. SafeAreaView
, View
등의 레이아웃 컴포넌트의 flex
속성이나 zIndex
속성 등으로 인해 예상치 못한 배치가 되어있을 수 있습니다.
디바이스 특성 고려: Platform.OS
를 사용하여 iOS와 Android에서의 동작 차이를 고려하셨는데, 특정 플랫폼에서만 발생하는 문제일 수도 있으니, 다양한 디바이스나 에뮬레이터에서 테스트해보는 것이 좋습니다.
메인 컨테이너 스타일: App.js
에서 MainScreen
을 감싸는 컨테이너에 alignItems: 'flex-start', justifyContent: 'center'
로 설정되어 있습니다. 이는 내부 컴포넌트의 위치를 영향을 줄 수 있으니, 이 부분도 확인해보세요.
상기 사항들을 다시 한 번 점검해보시고, 여전히 문제가 해결되지 않는다면, View
나 SafeAreaView
의 flex: 1
설정을 조정해보시는 것도 좋을 것 같습니다. 또한, 개발 환경에서 디버깅 도구를 활용하여 요소의 실제 렌더링 위치와 스타일을 직접 확인해보는 것도 문제를 해결하는 데 도움이 될 수 있습니다.