(작성중) react-native docs

• 이제 화면을 그리고 기능을 만들기위해

components를 익힐시간!!!

 

flutter할때도 그렇지만 components를 익혀야 한다는게 나에게는 숙제다..

react는 그냥 뚝딱뚝딱 만들면댔는대

 

정해져있는걸로 만들어야하니..

장점이면서도 단점인 그런 부분

 

그래도 할건해야지? ㅎㅎ

 

 

--

0.72...언제 1될래?

 

 

[components]

Text, 

Image, 

TextInput,

<TextInput
    style={styles.input}
    onChangeText={()=>{}}
    value={number | text}
    placeholder=“placeholder"
    keyboardType={'decimal', 'email', 'none', 'numeric', 'search', 'tel', 'text', 'url'}
/>

 

ScrollView, 

View,

• div 같은 느낌이라고 생각하면됨

 

StyleSheet

• styles = StyleSheet.create({…options})

styles.oprionsKey를 할당해서 사용가능.

 

 

[interface]

Button

Switch

<Switch
    trackColor={{false: '#767577', true: '#81b0ff'}}
    thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
    ios_backgroundColor="#3e3e3e"
    onValueChange={()=>{}}
    value={boolean}
  />

TouchableHighlight

• 기본적인 시각적 피드백을 제공하므로 사용자가 터치 인터랙션을 인식하기 쉽습니다.

TouchableOpacity

• 시각적 피드백을 제공하지 않기 때문에 사용자의 주의를 산만하게 만들지 않습니다

TouchableWithoutFeedback

• 터치 이벤트를 처리하지만 시각적 피드백을 제공하지 않습니다.

 

[list views]

flatList

• 많은 데이터를 그릴때 주로 사용되는 아이.
  * RecyclerListView

SectionList

• flatList + section

<SectionList
  sections={[{title: ‘’, data:[‘’,’’,’’…]},{}…]}
  keyExtractor={(item: object, index: number) => string}
  renderItem={({item index, section, separators}) => {
    return item;
    }}
  renderSectionHeader={(info: {section: Section}) => element ｜ null}
/>

VirtualizedList

• flatList + view port안에서의 list (성능면에서 이게좋음)

 

 

[android components apis]

backHandler

DrawerLayoutAndroid

PermissionsAndroid

ToastAndroid

 

[ios components apis]

ActionSheetIOS

 

[others]

ActivityIndicator

Alert

Animated

Dimensions

KeyboardAvoidingView

• 키보드 올라오고 뷰크기 제어

Linking

Modal

PixelRatio

RefreshControl

StatusBar

• 상단바(노치있는곳)

<StatusBar
    animated={boolean}
    backgroundColor="#61dafb"
    barStyle={‘default’ | ’light-content’ | ’light-content’}
    showHideTransition={ 'fade' | 'slide' | 'none'}
    hidden={boolean}
  />