React Native 기본 구조 잡기

GGomBee·2021년 12월 3일
0

React-native

목록 보기
3/4
post-thumbnail

리액트 네이티브를 시작했는데,, 생각보다 react와 다른점이 많이 없는 것 같아서 재밌는 것 같다.

비교점?? 정도만 간단하게 작성해보고자 한다.

기존의 리액트 컴포넌트에서 jsx 문법을 작성할 때 <></> 태그나

태그를 이용해서 전체를 감싸주는데 RN에서는 라는 태그를 사용한다.

아래 코드를 비교해보자.

<ScrollView style={style.loginWrapper}>
      <View
        style={{flex: 1}}
        contentContainerStyle={{
          flexGrow: 1,
          // paddingBottom: inset.bottom,
        }}>
        <Image source={assets.logo_login} style={style.logo} />
        <View
          style={{
            borderColor: colors.VERY_LIGHT_PINK,
            borderWidth: 0.5,
            borderRadius: 10,
            marginTop: 15,
          }}>
          <LoginInput
            placeholder={'아이디를 입력하세요'}
            guideText={'아이디'}
            borderTopRadius={10}
            value={id}
            onChangeText={setId}
          />
          <LoginInput
            placeholder={'비밀번호를 입력하세요'}
            guideText={'비밀번호'}
            borderBottomRadius={10}
            value={password}
            secureTextEntry
            onChangeText={setPassword}
          />
        </View>
        <TouchableOpacity style={style.checkBox} onPress={setAutoLogin}>
          <Circle
            width={20}
            height={20}
            img={assets.check_small_white}
            backgroundColor={
              checked ? colors.WARM_PINK : colors.VERY_LIGHT_PINK
            }
          />
          <Text style={style.checkBoxText}>로그인유지</Text>
        </TouchableOpacity>
      </View>
      <View style={style.snsWrapper}>
        <View style={style.snsAdvWrapper}>
          <View style={style.snsGapLine}>
            <Text style={{fontWeight: '500', color: colors.BLACK_5}}>
              혹은
              <Text>
                {`  `}
                소셜아이디
              </Text>
              로 로그인
            </Text>
          </View>
        </View>
      </View>
    </ScrollView>

ScrollView

스크롤 뷰로 전체를 감싸주면 화면이 스크롤시 아래로 쭉 내려갔다 올라오는 액션이 추가 된다.

View

위에서 말했듯이 div와 비슷한 역할을 한다.

Text

글을 적을때 사용한다. 마치 p태그나.. antd에서의 Text와 비슷한 느낌..?

TouchableOpacity

TouchableOpacity를 사용하면 앱에서 사용하는 클릭이벤트와 같은 이벤트 관련 함수들을 처리할 수 있다. (onPress, onBlur 등)

TextInput

인풋박스처럼 사용 가능하다!

그럼 스타일은???

스타일은 Stylesheet.create 함수로 css in js처럼,.. styled -component 처럼 사용가능하다!

아래 코드를 보면 이해가 쉬울것 같다.

const styles = StyleSheet.create({
buttonWrapper: {
  paddingLeft: 10,
  paddingRight: 10,
  height: 24,
  backgroundColor: '#454545',
  borderRadius: 16,
  justifyContent: 'center',
  alignItems: 'center',
  marginTop: 6,
},
buttonText: {
  color: colors.WHITE,
  fontSize: 10,
},
});


const InputButton = ({text, onPress, disabled = false}) => {
return (
  <TouchableOpacity
    style={[
      styles.buttonWrapper,
      {
        backgroundColor: disabled
          ? colors.VERY_LIGHT_PINK_2
          : colors.DARK_GRAY,
      },
    ]}
    onPress={onPress}
    disabled={disabled}>
    <Text style={styles.buttonText}>{text}</Text>
  </TouchableOpacity>
);
};

export default InputButton;

요렇게 styles를 먼저 선언하고 안에서 style.buttonWrapper와 같이 사용하면 된다!!

오늘은 여기서 끝!!!!

profile
Stay Hungry, Stay Foolish! 겸손한 개발자 고은비입니다. 언제나 성장하기 위해 노력하며 유의미한 데이터로 사용자의 경험을 향상시키는 방법에 관심이 많습니다. 성장하고 싶어요!! 피드백은 언제나 환영입니다!

0개의 댓글