【React Native入門】3-1 UIコンポーネント 入力の基本

「React Native入門　掌田 津耶乃著」にて動作確認したコードを逐一まとめた記事です。
基本は自分用のメモですので、動作確認したい場合ご利用ください。
ある程度は1記事を更新していき、セッションが切り替わったら別記事に残していこうと思います。

目次
[ P.94〜P.97 ] Switchコンポーネント
[ P.97〜P.100 ] Sliderコンポーネント
[ P.100〜P.103 ] Pickerコンポーネント

---

[ P.94〜P.97 ] Switchコンポーネント

(value) => { ...処理... }

<Switch value={ 値 } onValueChange={ 関数 } />

App.js

import React, { Component } from 'react';
import { StyleSheet, Alert, Button, TextInput, Image, Switch, Text, View } from 'react-native';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.title = 'Switch UI';
    this.state = {
      value: false
    };
  }

  render() {
    return (
      <View style={styles.base}>
        <Text style={ styles.title }>{ this.title }</Text>
        <Text style={ styles.message }>switch:{ this.state.value ? 'ON' : 'OFF' }</Text>
        <Switch value={ this.state.value } onValueChange={ this.doAction } />
      </View>
    );
  }

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

const styles = StyleSheet.create ({
  base: {
    padding: 25
  },
  title: {
    padding: 35,
    color: 'skyblue',
    textAlign: 'center',
    fontSize: 25,
  },
  message: {
    padding: 10,
    color: '#000',
    fontSize: 15,
  },
});

---

[ P.97〜P.100 ] Sliderコンポーネント

Sliderプロパティ
・value { 現在の値 }
・minimumValue { スライダーの最小値 }
・maximumValue { スライダーの最大値 }
・step { 増減値 }
・onValueChange { スライダーを動かしている間のイベント処理 }
・onSlidingComplete { スライダーから指を離したときのイベント処理 }

<Slider value={ 値 }
 onValueChange={ 関数 }
 onSlidingComplete={ 関数 }
 minimumValue={ 値 }
 maximumValue={ 値 }
 step={ 値 }
/>

App.js

import React, { Component } from 'react';
import { StyleSheet, Alert, Button, TextInput, Image, Switch, Slider, Text, View } from 'react-native';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.title = 'Slider UI';
    this.state = {
      value: 0,
      message: 'Drag Me!'
    };
  }

  render() {
    return (
      <View style={styles.base}>
        <Text style={ styles.title }>{ this.title }</Text>
        <Text style={ styles.message }>slider:{ this.state.message }</Text>
        <Slider value={ this.state.value }
          onValueChange={ this.doAction }
          onSlidingComplete={ this.doComplete }
          minimumValue={ 0 }
          maximumValue={ 100 }
          step={ 1 }
        />
      </View>
    );
  }

  doAction = (value) => this.setState({ value: value, message: value });
  doComplete = (value) => this.setState({ message: 'マウスを離した後 [' + value + ']' });
}

const styles = StyleSheet.create ({
...上記と同じ
});

---

[ P.100〜P.103 ] Pickerコンポーネント

Pickerコンポーネント => HTMLでいうSelect Boxという認識であってるかな
間違っていたらご指摘ください

Pickerクラス
・selectedValue { 選択された値 }
・onValueChange { 値を変更した時のイベント処理 }
・prompt { 選択リストのタイトル（Androidのみ） }
・mode { 表示スタイル。dialogまたはdropdownから指定（Androidのみ） }
・itemStyle { 選択項目のスタイル（iOSのみ） }

Picker.Itemクラス
・label { 項目として表示されるテキスト }
・value { 選択された時の値 }

<Picker
 selectedValue={ 値 }
 onValueChange={ 値 }
>
  <Picker.Item label="ラベル" value="値" />
  <Picker.Item label="ラベル" value="値" />
  ...必要な分だけ追加...
 </Picker>

App.js

import React, { Component } from 'react';
import { StyleSheet, Alert, Button, TextInput, Image, Switch, Slider, Picker, Text, View } from 'react-native';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.title = 'Picker UI';
    this.state = {
      message: 'Select Me!'
    };
  }

  render() {
    return (
      <View style={styles.base}>
        <Text style={ styles.title }>{ this.title }</Text>
        <Text style={ styles.message }>picker:{ this.state.message }</Text>
        <Picker
          prompt={ 'Select Item:' }
          selectedValue={ this.state.value }
          onValueChange={ this.doAction }
        >
          <Picker.Item label="選択してください" value="" />
          <Picker.Item label="Windows" value="Windows" />
          <Picker.Item label="Mac" value="MacOS" />
          <Picker.Item label="Linux" value="Linux" />
          <Picker.Item label="ChromeBook" value="ChromeOS" />
        </Picker>
      </View>
    );
  }

  doAction = (itemValue, itemIndex) =>
    this.setState({ value: itemValue, message: itemValue });
}

const styles = StyleSheet.create ({
...上記と同じ
});