• 카테고리

    질문 & 답변

  • 세부 분야

    모바일 앱 개발

  • 해결 여부

    미해결

커스텀 컴포넌트 관련 질문드립니다

22.05.07 20:46 작성 조회수 94

0

안녕하세요

커스텀 컴포넌트 강의를 듣고 따라하고 있는데 

react native에서 Button 부분 받아와서 작성한 코드만 가상기기에 적용이 안됩니다.

예를 들어 가상기기의 초기 화면에 뜨는 텍스트의 단어를 수정한 것은 바로바로 반영이 되는데, MyButton 등의 항목은 나타나지 않을 뿐더러 아예 반영이 되지 않습니다.. 코드 에러도 나는 것이 아니여서 무엇이 잘못되었는지 모르겠습니다 ㅠㅠ

https://blog.naver.com/wlsgywjd22/222724101803

여기에 영상 등록해놓았는데 어디 문제일까요..

++ 혹시 TouchableOpacity 대신 Pressable을 이용해야 하나요? Pressable을 이용해야 한다면 문법이 좀 다른가요?ㅜㅜ 그냥  TouchableOpacity 단어 대신 Pressable을 치환하는 걸로는 정상 실행이 안되네요...

코드는 우선 pressable로 바꾼 후 코드로 올립니다

MyButton.js

import React from 'react';
import { Pressable,View,Text } from 'react-native';

const MyButton = () => {
return (
<Pressable onPress={() => alert('MyButton')}>
<View Style={{backgroundColor: 'red', padding: 10}}>
<Text style={{ fontSize: 20, color:'white'}}>MyButton</Text>
</View>
</Pressable>
);
};

export default MyButton;

App.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Button} from 'react-native';
import MyButton from './MyButton';

export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
<Button title="Button" onPress={() => alert('Click!!')} />
<MyButton />
</View>
);
}

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

처음 배우는 리액트 네이티브

답변 1

답변을 작성해보세요.

0

김범준님의 프로필

김범준

지식공유자

2022.05.08

안녕하세요 wlsgywjd22님, 

  

MyButton컴포넌트의 View 컴포넌트에 오타가 있네요.

Style을 style로 변경하세요. 

  

질문을 할때는 작업중인 내용을 깃헙에 올리고 깃헙 레포를 링크로 남겨주세요. 

그래야 조금 더 빠르고 정확하게 확인해 드릴 수 있습니다. 

  

즐거운 하루 되세요

감사합니다. 

이 글과 비슷한 Q&A