Til (2022.12.30)

리액트 네이티브 Todolist 메인화면 만들기

 

기본적으로 Text, TextInput, View등 사용할 태그들은 모두 import해온 후 사용해야 한다.

css스타일링 방법엔 

• inline styling
• StyleSheet
• Styled Component
• Tailwind

등이 있다. 이중에 styled component를 사용했는데 react native에서는 기본 사용했던 styled component가 아니라

emotion native (https://emotion.sh/docs/@emotion/native)를 사용하는게 편하고 호환이 잘 된다.

설치 후

npm install @emotion/react @emotion/native

import

import styled, { css } from '@emotion/native'

사용법은 아래같이 styled.뒤에 View, Text등을 넣으면 그 속성이 된다.

• border같은 경우는 특정 부분을 사용하려면 색, 넓이를 따로 줘야한다.
• border-bottom-color: #000;
• border-bottom-width: 1px;

const StyledText = styled.TouchableOpacity`
  background-color: #ccc;
  width:100px;
  height:50px;
`;

<StyledText onPress={() => alert("안녕")}>Javascirpt</StyledText>

 

리액트 네이티브는 정렬이 기본으로 반대로 돼 있다.

글을 쓸 땐  <Text></Text>로 써야하고 

div와 비슷한것 사용하려면 <View></View>로 사용하면 된다.

이외에 노치를 자동으로 제외하고 시작해주는<SafeAreaView></SafeAreaView>,

버튼인 <Button></Button> 등이 있다.

Button의 경우에는 안에 style속성이 없어서 편집이 힘들어 같은 onPress효과를 넣을 수 있는 <TouchableOpacity />가 개인화 하기에 더 편리하다.