Help us understand the problem. What is going on with this article?

【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 ({
...上記と同じ
});
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした