react-native expo

TouchableOpacity

react-native에서 주로 Button 대신 사용을 한다.
이유는 ios와 android에서 Button이 서로 다르게 보이기 때문이다.
편한 관리 차원에서 TouchableOpacity 를 사용한다.

const Button = ({ onPress }) => {
  return (
    <TouchableOpacity activeOpacity={0.8} onPress={onPress}>
      <Text>Button</Text>
    </TouchableOpacity>
  );
};

activeOpacity : 버튼을 눌렀을 때 반짝이는 정도

ScrollView

데이터가 단순히 화면을 벗어났을 때 스크롤을 생성하고 스와이프를 통해 데이터를 볼 수 있도록 해주는 것에 목적을 둔다.
데이터의 양이 많지 않고 고정적일 때 유용하다.

FlatList

화면에 보여주는 부분만 렌더링을 하기에 ScrollView에 비해 좋은 성능을 보여줌.

data : FlatList에서 사용할 data 값을 넘겨준다.

keyExtractor : 흔히 react에서 map을 돌려서 사용할 때 key와 동일한 역할을 한다.

keyExtractor={(_, index) => index}

renderItem : data를 활용하여 어떻게 render 할지 보여주는 곳

map과 비슷하게 item과 index 값을 활용하여 구성된다.
한번 object 형태로 감싸서 온다는 점

renderItem={({item, index}) => (
	<View>
  		...code
  	</View>
)}

ItemSeperatorComponent : Item 과 Item 사이에 들어갈 컴포넌트


ListHeaderComponent : FlatList의 header에 들어갈 컴포넌트


ListFooterComponent : FlatList의 footer에 들어갈 컴포넌트


stickyHeaderIndices : 고정할 header의 index 값을 넣어주는 곳

• 배열의 형태로 이루어짐

stickyHeaderIndices={[0]}

hitSlop : 아이템의 터치 영역을 컨트롤 함

hipSlop={{ top: 10, bottom: 10 }}