[React Native] React Native Component - 9. Picker

 

---

2022.01.11 - [React Native/Basic] - [React Native] React Native Component - 1. Intro

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 2. View, Text

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 3. Style

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 4. TouchEvent

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 5. Button

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 6. ScrollView

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 7. TextInput

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 8. Button, ScrollView, TextInput 심화

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 9. Picker

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 10. Slider

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 11. ActivityIndicator

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 12. Image

2022.01.12 - [React Native/Basic] - [React Native] React Native Component - 13. Modal

---

 

---

9. Picker

https://github.com/react-native-picker/picker

GitHub - react-native-picker/picker: Picker is a cross-platform UI component for selecting an item from a list of options.

위 페이지에 있는 README.md 파일을 보고 picker 를 설치한다.

 

 

picker.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, {Component} from 'react';
import {View, Text, StyleSheet, TextInput} from 'react-native';
import {Picker} from '@react-native-picker/picker';

class PickerComponent extends Component {
  state = {
    country: 'korea',
  };
  render() {
    return (
      <View style={styles.container}>
        <Picker
          style={{height: 50, width: 250}}
          selectedValue={this.state.country}
          onValueChange={(val, idx) => this.setState({country: val})}>
          <Picker.Item label="Korea" value="korea" />
          <Picker.Item label="Canada" value="canada" />
        </Picker>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 20,
    marginBottom: 200,
    alignItems: 'center',
  },
});

export default PickerComponent;

label - 화면 상에 보여지는 부분

value - 코딩하면서 쓰는 부분

selectedValue - 기본값 지정

onValueChange - 처음에 값 변경이 안 되기 때문에 위 코드처럼 setState로 바꿔줘야 한다.  

 

---

참고 자료

https://www.inflearn.com/course/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-%EA%B8%B0%EC%B4%88/dashboard

iOS/Android 앱 개발을 위한 실전 React Native - Basic - 인프런 | 강의