[React Native] Picker, Slider, ActivityIndicator

1. Picker

1) Picker 설치

Picker 설치는 React Native Community 깃허브 페이지(github.com/react-native-picker/picker)에서 설치하면 된다. (설치 시 npm을 멈추고 진행) 사용 방법은 하단에 잘 기술되어 있다.

React Native Community

npm install @react-native-picker/picker --save

설치가 완료되면 ios 폴더로 이동하여 pod install을 실행해주어야한다.

cd ios
npx pod-install
cd ..

※ React Native Community(github.com/react-native-community) 깃허브 페이지는 버전 업그레이드에 따른 별도 설치 안내, 필요한 서드파티 라이브러리 다운 등, 현업에서 참고해야하는 사항이 작성되어있다.

2) 사용 방법

• src 하위에 picker.js 파일 생성
• App.js에 picker.js import
• picker.js에 Picker import

 

import React, { Component } from 'react';
import { View, Text, StyleSheet } 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;

Picker

 

 

 

2. Slider

1) Slider 설치

Slider 설치는 React Native Community 깃허브 페이지(github.com/callstack/react-native-slider)에서 설치하면 된다. (설치 시 npm을 멈추고 진행) 사용 방법은 하단에 잘 기술되어 있다.

React Native Community

npm install @react-native-community/slider --save

cd ios
npx pod-install
cd ..

2) 사용 방법

...

import Slider from '@react-native-community/slider';

class PickerComponent extends Component {

    state = {
        country: 'korea',
        value: 50
    }

    sliderValueChange = (value) => {
        this.setState({
            value: value
        })
    }

    render() {
        return (
            <View style={styles.container}>
                <Slider
                    style={{height:40, width: 300}}
                    value={this.state.value}
                    minimumValue={0}
                    maximumValue={100}
                    onValueChange={this.sliderValueChange}
                    maximumTrackTintColor='red'
                    minimumTrackTintColor='blue'
                    step={10} // 10 단위로 변경
                />
                <Text style={styles.input}>
                    {this.state.value}
                </Text>
                
...

const styles = StyleSheet.create({

    container: {
        flex: 1,
        paddingTop: 20,
        marginBottom: 200,
        alignItems: 'center'
    },

    input: {
        width: '100%',
        marginTop: 20,
        fontSize: 25
    }
})

export default PickerComponent;

Slider

 

 

 

3. ActivityIndicator

import React, { Component } from 'react';
import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';

...

    render() {

...

                <Text style={styles.input}>
                    {this.state.value}

                    <ActivityIndicator
                        style={{paddingTop: 200}}
                        size='large'
                        color='green'
                        animating={true}
                    />
                </Text>
...

ActivityIndicator