리액트 네이티브를 시작했는데,, 생각보다 react와 다른점이 많이 없는 것 같아서 재밌는 것 같다.
비교점?? 정도만 간단하게 작성해보고자 한다.
기존의 리액트 컴포넌트에서 jsx 문법을 작성할 때 <></> 태그나
아래 코드를 비교해보자.
<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>
스크롤 뷰로 전체를 감싸주면 화면이 스크롤시 아래로 쭉 내려갔다 올라오는 액션이 추가 된다.
위에서 말했듯이 div와 비슷한 역할을 한다.
글을 적을때 사용한다. 마치 p태그나.. antd에서의 Text와 비슷한 느낌..?
TouchableOpacity를 사용하면 앱에서 사용하는 클릭이벤트와 같은 이벤트 관련 함수들을 처리할 수 있다. (onPress, onBlur 등)
인풋박스처럼 사용 가능하다!
스타일은 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와 같이 사용하면 된다!!
오늘은 여기서 끝!!!!