Skip to content

component.md

Latest commit

 

History

History
181 lines (147 loc) · 3.86 KB

component.md

File metadata and controls

181 lines (147 loc) · 3.86 KB
Raw

메인으로

React Native Component

View

  • Div 역할

Text

  • 모든 텍스트는 반드시 Text 컴포넌트 안에 있어야 함

StatusBar

  • 앱 상단 상태바(시계, 배터리 표시 부분)
  • 종류: light-content, dark-content
  • <StatusBar barStyle="종류"/>

Dimensions

  • 앱의 크기를 가져올수 있음
  • const { height, width } = Dimensions.get("window");

ScrollView

  • 스크롤이 가능한 View
  • 이걸로 만들지 않으면 넘어가는 부분은 짤려보임(= overflow: hidden)
  • contentContainerStyle 프로퍼티로 스타일을 적용
<ScrollView contentContainerStyle={styles.todos}>
    <ToDo />
</ScrollView>

TouchableOpacity

  • 클릭했을때 반투명 처리
  • Event
    • onPress: 누를때
    • onPressOut: 누르고 손가락 띄울때

TextInput

  • input type="text" 역할
  • Event
    • onChangeText: 텍스트가 바뀐때
    • onBlur: 포커스 빠져나갔을때
    • onSubmitEditing: 완료(Done) 클릭시
<TextInput style={styles.input} value={toDoValue} multiline={true} underlineColorAndroid={"transparent"}/>

AsyncStorage

  // 넣을 때
  AsyncStorage.setItem("toDos", JSON.stringify(newToDos));

  // 꺼낼 때
  getData = async () => {
    try {
      const toDos = await AsyncStorage.getItem("toDos");
      if(toDos !== null) {
        const parseToDos = JSON.parse(toDos);
      }
    } catch (err) {
      console.log(err)
    }
  }

FlatList

  • ui > li 역할
  • 데이터가 담긴 배열을 data 속성에 넣고 renderItem에 반복될 컴포넌트를 리턴해주면 리스트를 생성
  • data 안에는 반드시 key가 들어가 있어야 함
  • data가 변해도 리렌더링을 하지 않으므로 변경될 기준이 되는 데이터인 extraData를 따로 설정해줘야 한다.
const DATA = [
  {
    key: uuid(),
    text: 'First Item',
  },
  {
    key: uuid(),
    text: 'Second Item',
  },
  {
    key: uuid(),
    text: 'Third Item',
  },
];

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <FlatList 
        data={ DATA }
        extraData={ DATA.length } // 갯수가 변하면 리렌더링
        renderItem={ ({item}) => (
          <Button title={item.text}	onPress={() => this.removeItem( item.key )}/>
        )}
      />
    </SafeAreaView>
  );
}

Image

  • 이미지
  • resizeMode: contain(비율에 맞춤) stretch(크기에 맞게 늘림)
<Image source={{uri: item.image}} style={{width: 300, height: 300}} resizeMode={ 'contain' }/>

ActivityIndicator

  • IOS와 Android 각각 기본 로딩화면을 출력
import { ActivityIndicator, View} from "react-native";

export default function App() {
  return (
    <View style={[styles.container, styles.horizontal]}>
      <ActivityIndicator size="large" color="#0000ff" />
    </View>
  );
}

ImageBackground

  • 백그라운드 이미지 출력
import { ImageBackground, Text, View } from "react-native";

const image = { uri: "https://reactjs.org/logo-og.png" };

export default App = () => (
  <View style={styles.container}>
    <ImageBackground source={image} style={styles.image}>
      <Text style={styles.text}>Inside</Text>
    </ImageBackground>
  </View>
);

SafeAreaView

  • 노치 형태가 있는 폰들의 뷰 영역에 대응함
  • 상단 노치 영역과 하단 홈 슬라이드 영역을 지켜줌
<View style={ styles.container }>
  <SafeAreaView>
    ...
  </SafeAreaView>
</View>