RN강의 내용 정리

YEONGHUN KO·2024년 9월 13일

REACT NATIVE - BASIC

목록 보기

1/1

** react native seoul => slack 채널

IOS에 스타일링이 안먹힌다면, view로 감싸고 view에다가 스타일링을 적용해보기. rn에서는 css가 cascading되지 않음.

built-in component

ScorllView

ScorllView를 사용해야 화면밖으로 삐져나갔을때 스크롤이 된다.

FlatLIst

FlatLIst는 아이템을 lazy하게 랜더링할때 사용됨
data안에 key prop이 있어야함

renderItem-separators함수로 highlight prop을 업데이트 가능함 아래처럼

<FlatList
  ItemSeparatorComponent={
    Platform.OS !== 'android' &&
    (({highlighted}) => (
      <View
        style={[style.separator, highlighted && {marginLeft: 0}]}
      />
    ))
  }
  data={[{title: 'Title Text', key: 'item1'}]}
  renderItem={({item, index, separators}) => (
    <TouchableHighlight
      key={item.key}
      onPress={() => this._onPress(item)}
      onShowUnderlay={separators.highlight}
      onHideUnderlay={separators.unhighlight}>
      <View style={{backgroundColor: 'white'}}>
        <Text>{item.title}</Text>
      </View>
    </TouchableHighlight>
  )}
/>

TouchableHighlight

TouchableHighlight는 눌렀을때 배경이 변하는 컴포넌트임

Pressable

Touchable(deprecated) 대신 Pressable이라는 컴포넌트를 쓰자.
style에 pressed를 인자에서 뽑아낼 수 있음. pressed라는 인자를 이용해 눌렀을때 스타일 조정할 수 있음.

propFunction.bind(this,props.id) id 넘어가는 것을 props를 통해 넘겨받은 함수안에서 id를 사용할 수 있다.

Button컴포넌트가 built-in으로 있는데, pressable이 내장되어있어서 요거 쓰는거 좋음
하지만 좀더 커스터마이즈 하고 싶으면 pressable쓰는게 좋음

Modal이라는 컴포넌트도 내장되어있음. 요거 쓰면 따로 컴포넌트 만들 필요 없음.
보통 아래와 같이 쓰임

<Modal>
  <View style={styles.container}>
  </View>
</Modal>

width

alignSelf: 'flex-start’==> width:fit-content

Image

Image 의 source에 require을 써야함 ex> <Image source={require(‘/assets/images/some.png’} />
ImageBackGround 컴포넌트를 쓰면 resizeMode prop을 이용하여 배경화면이 화면에 딱맞게 설정될 수 있다.
그리고 ImageBackGround의 소스코드를 보면 stlye을 Image 컴포넌트에 적용하는 걸 볼수 있음. 따라서 transparent를 적용하고 싶으면 opacity를 style에 추가해줘라.
외부링크를 쓰려면 uri field를 사용하기.
그리고 statusBar를 0.64.2에서 뽑아낼 수 있는지 보아라. statusBar는 위의 시간, 배터리 , 와이파이쪽을 건드릴 수 있음.

boxShadow
Aos : elevation
iOS : shadow~

TextInput

TextInput에서 keyboardType 을 고를 수 있음.

Flex:1 이면 element가 차지할 수 있는 공간을 최대한 차지하게 함.
Max width를 사용해서 responsive하게 만들 수 있음 (부모 요소를 기준)

Alert

Alert안에 onPress도 사용 가능

Safeareaview

Safeareaview => 맨 위 status. Bar 안에 content가 위치할 수 있게!

Demensions.get

Demensions.get(‘window’)
available space of the screen (without status bar)
.width / .height property를 꺼내 쓸 수 있음.

useWindowDimensions

useWindowDimensions
Portrait or landscape 바뀔 때 마다 width, height 를 감지함. Demensions.get는 앱 시작할때 딱 한 번만 감지

keyboardAvoidingVIew

keyboardAvoidingVIew
Screen : { flex:1 } / ScrollView로 감싸서 키보드 올라왔을때 화면 스크롤 가능하게해서 화면에 가려진 부분들을 스크롤 할 수 있도록

style prop

style prop에 두가지 obj를 적용가능
Const dynamicStyle = { width : imageWidth }
style = {[ styles.screen , dynamicStyle ]}

Platform

Platform.select({ ios : 100, android : 2}) => iOS 일때랑 android일때랑 다르게 적용가능. ternary를 사용하는 것 보다 더 readable함
아니면 파일이름을 file.ios.js / file.android.js 로 해도 됨

https://reactnavigation.org/docs/navigation-prop/

Navigator screenOptions에서 headerRight에 함수를 pass가능함. 근데 그 함수의 인자로 tintColor를 뽑아낼 수 있음(headerTintColor)

<BottomTabs.Navigator
        screenOptions={{headerTintColor:’white’,
            headerRight:({tintColor})=>{console.log(tintColor) // white
            }
        }}
      >

<BottomTabs.Navigator
        screenOptions={({navigation})=>(
          {headerTintColor:  ’white’,
            headerRight:({tintColor})=>{console.log(tintColor) // white
       }
      }
           
   )}
>

Stack.Screen => options=> presentation에서 어떻게 화면이 appear할지 효과를 지정할 수 있음.

예시>

<Stack.Screen
   Options={{presentation:’modal’}}
  >

navigation.setOptions({title:’ds’}) 처럼.

useLayoutEffect로 감싸면 flickering없이 title 변경 가능

=> https://reactnavigation.org/docs/navigation-prop/#setoptions 참고

https://reactnavigation.org/docs/params/#passing-params-to-nested-navigators

this.props.navigation.reset({
      index: 0,
      routes: [
        {
          name: 'Main',
          params: {
            screen: I18n.t('profile'),
          },
        },
      ],
    });

YEONGHUN KO

'과연 이게 최선일까?' 끊임없이 생각하기