[React Native] Element 모음

Element

● 기본 제공 element

FlatList

• horizontal
• showsHorizontalScrollIndicator

• data

  • [{}, {}, {} … ] 이렇게 생겼음

• renderItem

  renderItem에서 꺼내 쓸 때는 destructuring 해줘야 하고, item으로 꺼내야 함

  data에 전달해 준 리스트 아이템 하나하나가 renderItme 인자로 넘어옴

• keyExtractor

  여기서 꺼낼 때는 내가 원하는 이름으로 꺼낼 수 있음

Button

• onPress

  • 함수만 넘겨주면 버튼이 로드 될 때도 호출됨. 눌렀을 때만 호출하고 싶으면 () ⇒ {} 이렇게 넘겨줘야 함
• title

Image

• source

  source={require(’../../assets/beach.jpg’)}

Text

• iOS에서는 border 방향 적용 안 됨

ActivityIndicator

• null 일 때 로딩 아이콘 띄우기 - ActivityIndicator
• ActivityIndicator

TextInput

form 만들 때면 컴포넌트화 할 수 있는지 꼭 고민하자. 뷰 그릴 때는 잘라서 element화 할 수 있는가, 아니면 합쳐서 form으로 만들 수 있는가, 공통 style용 만들 수 있는가

일반 속성

• autoCapitalize=“none”
• autoCorrect={false}

• onChangeText

  • onChange아니고 onTextChange임
• onEndEditing
• label=“Email”

• secureTextEntry

  • 비밀번호 입력용

const TextScreen = () => {

    const [name, setName] = useState('');

    return (
        <View>
            <Text>Enter Name: </Text>
            <TextInput 
                style={styles.input}
                autoCapitalize="none"
                autoCorrect={false}
                value={name}
                onChangeText={newValue => setName(newValue)} />
            <Text>My name is {name}</Text>
        </View>
    )
}

비밀번호 추천 없애는 방법

문제는 가끔 안 없어질 때도 있음

• secureTextEntry
• textContentType=“oneTimeCode”

ScrollView

유의점

• 안드로이드는 아예 스크롤이 안 되고, iOS도 일부만 스크롤이 되는 문제가 있음. 리액트가 화면에 꽉 채워서, 일부는 bottom 네비게이션 밑까지 채우기 때문

  

  해결1) flex: 1

  const SearchScreen = () => {
  
    ...
  
    return (
        <View style={{ flex: 1}}>
            <SearchBar 
                term={term} 
                onTermChange={setTerm}
                onTermSubmit={() => searchAPI(term)}  />
            {errMsg ? <Text>{errMsg}</Text> : null}
            <Text>We have found {results.length} results</Text>
            <ScrollView>
                <ResultsList results={filterResultsByPrice('$')} title="Cost Effective"/>
                <ResultsList results={filterResultsByPrice('$$')} title="Bit Pricier"/>
                <ResultsList results={filterResultsByPrice('$$$')} title="Big Spender"/>
            </ScrollView>
        </View>
    )
  }

  해결2) <></>로 씌워주기

  const SearchScreen = () => {
  
    ...
  
    return (
        <>
            <SearchBar 
                term={term} 
                onTermChange={setTerm}
                onTermSubmit={() => searchAPI(term)}  />
            {errMsg ? <Text>{errMsg}</Text> : null}
            <Text>We have found {results.length} results</Text>
            <ScrollView>
                <ResultsList results={filterResultsByPrice('$')} title="Cost Effective"/>
                <ResultsList results={filterResultsByPrice('$$')} title="Bit Pricier"/>
                <ResultsList results={filterResultsByPrice('$$$')} title="Big Spender"/>
            </ScrollView>
        </>
    )
  }

Fragment

• <></>를 fragment라고 함
• react native jsx는 render 되는 값이 한 개여야 되기 때문에 반드시 하나의 element거나 여러개인 경우 View 같은 것으로 둘러싸줘야 함. 이 때 굳이 View를 사용할 이유 없다면 fragment를 사용해도 됨.