[React-Native] Picker(Selector) / Slider / Loading창

728x90

Picker & Slider & Loading창(Activity Indicator) 를 구현합니다.

이게 Picker

이게 슬라이더

Picker

Picker Install

picker를 사용하기 위해서는 install이 필요합니다. ( picker 는 react-native module이 아님)

그때 그때 업데이트를 해서 달라질 수 있으니 공식문서 확인이 필요합니다.

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

react-native-picker/picker

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

github.com

이곳에서 확인이 가능합니다.

이제 이를 npm start이전에 입력해서 설치해주어야 하는데, 이미 시작했다면 ctrl + c로 종료하시고 실행하시기 바랍니다.

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

cd ios
npx pod-install

//원 디렉토리로 이동
cd ../

Picker

src폴더에 picker.js 파일을 만든다.

picker import

import {Picker} from '@react-native-picker/picker';

picker는 react-native module이 아니므로 다음과 같이 임포트해줍니다.

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 {
  render() {
    return (
      <View style={styles.container}>
        <Picker style={{height: 50, width: 250}}>
          <Picker.Item label="korea" value={'korea'} />
          <Picker.Item label="USA" value={'usa'} />
        </Picker>
      </View>
    );
  }
}

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

export default PickerComponent;

크기를 지정해주고 Picker.Item을 이용해 넣어줄 값을 지정합니다.

label에는 보여질 값을 작성하고, value에는 실제 가지는 값을 작성합니다.

결과)

아직 다른 값을 선택할 수 없습니다.

Default value지정(selected)

default로 선택되어 있는 값을 지정해주기위해 state를 사용합니다.

Picker.js

class PickerComponent extends Component {
  state = {
    country: 'usa',
  };

  render() {
    return (
      <View style={styles.container}>
        <Picker
          style={{height: 50, width: 250}}
          selectedValue={this.state.country}>
          <Picker.Item label="korea" value={'korea'} />
          <Picker.Item label="USA" value={'usa'} />
        </Picker>
      </View>
    );
  }
}

default를 임의로 usa로 설정해주고 실행하면, 기본으로 선택되는 값이 usa로 지정됩니다.

결과)

onVlaueChange(val,idx)

picker가 다른 값을 선택하기 위한 콜백 함수를 호출하도록 하는 property

두개의 변수를 가진다.

val : 실제 앱의 picker를 통해 선택된 값

idx : picker에서 선택한 인덱스값

class PickerComponent extends Component {
  state = {
    country: 'usa',
  };

  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="USA" value={'usa'} />
        </Picker>
      </View>
    );
  }
}

해당 함수를 호출해 setState를 이용하여 country의 값을 변경해주었습니다.

이제 원하는 값을 pick할수 있게되었습니다.

전체코드)

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: 'usa',
  };

  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="USA" value={'usa'} />
        </Picker>
      </View>
    );
  }
}

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

export default PickerComponent;

App.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 PickerComponent from './src/picker';

class App extends Component {
  render() {
    return (
      <View>
        <PickerComponent />
      </View>
    );
  }
}

const styles = StyleSheet.create({});

export default App;

Slider

Slider Install

slider를 사용하기 위해서는 install이 필요합니다. ( slider 는 react-native module이 아님)

그때 그때 업데이트를 해서 달라질 수 있으니 공식문서 확인이 필요합니다.

https://github.com/callstack/react-native-slider

callstack/react-native-slider

React Native component used to select a single value from a range of values - callstack/react-native-slider

github.com

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

cd ios
npx pod-install

//원 디렉토리로 이동
cd ../

Slider Import

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

사용법)

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

class PickerComponent extends Component {


  render() {
    return (
      <View style={styles.container}>
        <Slider style={{height: 40, width: 300}} />
      </View>
    );
  }
}


export default PickerComponent;

다음과 같은 결과를 볼 수 있습니다.

결과)

Property

Slider에 거의 필수적으로 들어가야하는 property들 입니다.

슬라이더는 기본적으로 값을 조절하기 때문에, 이를 저장하는 value가 필요합니다.

→ state에 value추가

또한, 값의 범위가 지정되어야 합니다.

전체 property는 다음과 같습니다.

몇가지만 살펴보도록 하겠습니다.

min/max/state:value

/**
 * 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';
import Slider from '@react-native-community/slider';

class PickerComponent extends Component {
  state = {
    country: 'usa',
    value: 50,
  };



  render() {
    return (
      <View>
        <View style={styles.container}>
          <Slider
            style={{height: 40, width: 300}}
            value={this.state.value}
            minimumValue={0}
            maximumValue={100}
          />


        <View>
          <Text style={styles.input}>{this.state.value}</Text>
        </View>
      </View>
    );
  }
}



export default PickerComponent;

다음과 같이 property를 추가하였습니다.

이제 슬라이더에 따라 실제 value값이 변하게 하기 위해서 다른 property를 사용합니다.

슬라이더 값의 변화가 생길때마다 콜백함수를 부르는 onValueChange를 이용해 값을 변경해주는 함수를 부릅니다.

onValueChange

다음과 같이 setState를 이용해 인자로 받은 value를 state의 value로 업데이트 해주는 함수를 작성한 뒤,

이를 onValueChange에 부릅니다.

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

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';
import Slider from '@react-native-community/slider';

class PickerComponent extends Component {
  state = {
    country: 'usa',
    value: 50,
  };

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

  render() {
    return (
      <View>
        <View style={styles.container}>
          <Slider
            style={{height: 40, width: 300}}
            value={this.state.value}
            minimumValue={0}
            maximumValue={100}
            onValueChange={this.sliderValueChange}
          />

        </View>
        <View>
          <Text style={styles.input}>{this.state.value}</Text>
        </View>
      </View>
    );
  }
}


export default PickerComponent;

결과)

step은 한번에 변화시킬 단위를 지정할 수 있고, max/minTrackTintColor를 이용해 값을 기준으로 색을 변경할 수도 있습니다.

          <Slider
            style={{height: 40, width: 300}}
            value={this.state.value}
            minimumValue={0}
            maximumValue={100}
            onValueChange={this.sliderValueChange}
            maximumTrackTintColor={'red'}
            minimumTrackTintColor={'blue'}
            step={10}
          />

결과)

picker & slider 전체코드)

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';
import Slider from '@react-native-community/slider';

class PickerComponent extends Component {
  state = {
    country: 'usa',
    value: 50,
  };

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

  render() {
    return (
      <View>
        <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}
          />

          <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="USA" value={'usa'} />
          </Picker>
        </View>
        <View>
          <Text style={styles.input}>{this.state.value}</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 20,
    marginBottom: 200,
    alignItems: 'center',
  },
  input: {
    width: '100%',
    marginTop: 20,
    fontSize: 50,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default PickerComponent;

App.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 PickerComponent from './src/picker';

class App extends Component {
  render() {
    return (
      <View>
        <PickerComponent />
      </View>
    );
  }
}

const styles = StyleSheet.create({});

export default App;

Activity Indicator(Loading)

앱을 구현할 때 창이 넘어가거나 데이터를 불러오는 등 약간의 시간이 필요할 때 나오는 로딩화면

Acitivity Indicator IMPORT

import {ActivityIndicator} from 'react-native';

리액트 네이티브 모듈입니다.

Property

size : 크기

color : 색

animating : true (보여짐) / false ( 보여지지 않음)

보통 animating을 이용하여, 서버등에서 데이터를 받아오는 중이면 true로 아니면 false로 설정하는 등으로 사용할 수 있다.

코드)

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

import React, {Component} from 'react';
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  ActivityIndicator,
} from 'react-native';
import {Picker} from '@react-native-picker/picker';
import Slider from '@react-native-community/slider';
import ActivityIndicatorViewNativeComponent from 'react-native/Libraries/Components/ActivityIndicator/ActivityIndicatorViewNativeComponent';

class PickerComponent extends Component {
  
  render() {
    return (
      <View>
        <View style={styles.container}>
          <ActivityIndicator
            style={{paddingTop: 200}}
            size="large"
            color="green"
            animating={true}
          />
        </View>
      </View>
    );
  }
}


export default PickerComponent;

결과)

728x90

'Frontend > React-Native' 카테고리의 다른 글

[ReactNative] Modal (0)	2021.06.02
[ReactNative] Image넣기 (0)	2021.06.02
[React-Native] 기능연습01(TextInput, Button, ScrollView) (0)	2021.06.01
[React-Native] 텍스트입력 받기(TextInput) (1)	2021.06.01
[React-Native] 스크롤 기능 (0)	2021.06.01

IagreeBUT

[React-Native] Picker(Selector) / Slider / Loading창

Picker & Slider & Loading창(Activity Indicator) 를 구현합니다.

Picker Install

Picker

Slider Install

picker & slider 전체코드)

'Frontend > React-Native' 카테고리의 다른 글

티스토리툴바

[React-Native] Picker(Selector) / Slider / Loading창

Picker & Slider & Loading창(Activity Indicator) 를 구현합니다.

Picker Install

Picker

Slider Install

picker & slider 전체코드)

'Frontend > React-Native' 카테고리의 다른 글

'Frontend/React-Native' Related Articles

티스토리툴바