[React Native] 태그 정리

Styles

View

<SafeAreaView style={styles.container}>
	<Text>Hello World</Text>
</SafeAreaView>

SafeAreaView - 콘텐트에 padding을 지정하여 화면에 보이도록 하는 API

Text

<Text numberOfLines={1} onPress={handlePress}>Hello World</Text>

numberOfLines - 보여지는 라인이 총 몇 줄인지 정해준다

Image

<Image source={require("./assets/icon.png")}/>

source={require(”./주소”)} - 폴더 안에 있는 사진 불러오기

<Image 
	source={{
	  width: 200,
	  height: 300,
	  uri:"https://picsum.photos/200/300",
	}}
/>

인터넷 주소로 사진 불러오기

<Image 
	blurRadius={10}
	fadeDuration={1000}
	source={{
	  width: 200,
	  height: 300,
	  uri:"https://picsum.photos/200/300",
	}}
/>

blurRadius={} - 가우시안 블러 효과

fadeDuration={} - 서서히 나타내기 위한 이팩트, 안드로이드에서만 가능

Touchable

• TouchableWithoutFeedback - 피드백 없는 touch API
• TouchableOpacity - 아주 잠시 opacity를 낮춤 (깜박거리는 효과) API
• TouchableHighlight - 배경이 잠시 어두워지면서 콘텐트 highlight 효과 API
• TouchableNativeFeedback - 안드로이드만 가능한, 누르면 옆으로 퍼지는 효과 API

Alert

Alert.alert("Title", "Message", [
              {text: "Yes", onPress: () => console.log("yeslee")},
              {text: "No", onPress: () => console.log("no..")},
            ])

Alert.alert() - 파라미터: 제목, 메세지, 버튼

Alert.prompt("Title", "Message", text => console.log(text))

파라미터: 제목, 메세지, 콜백(유저가 입력한 파라미터 가져감) iOS only!

StyleSheet

• 장점:

  StyleSheet가 아무리 틀려도 에러가 나지 않음

  여러가지 stylesheet와 조합이 가능하다

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgrondColor: "dodgerblue",
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
  },
});

const styles = StyleSheet.create()로 생성

const containerStyle = { backgroundColor: "orange"};

const containterStyle = {}로 변수 선언

Platform Module

• Platform - 플랫폼마다 다르게 적용하는 API

paddingTop: Platform.OS === “android” ? 20:0

20:0 패딩 주기

• StatusBar - 스탯바 활성화 시키는 API

paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0

스탯바 바로 밑에 콘텐트 넣기

Layout

Dimension

• DIP(Density-Independent Pixels)

Orientation

"orientation": "default"

To make app support both portrait and landscape orientation.

• ai 프로젝트 2
• 공프기 3
• oss 2