Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@dai_designing

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

More than 1 year has passed since last update.

「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 ({
...上記と同じ
});
2
Help us understand the problem. What is going on with this article?
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
dai_designing
本職はデザイナーですが、2017年の8月からphpでプログラミングをはじめ、CakePHP、Laravel などのフレームワークや最近はVueなどJS周りの強化に日々奮闘しております。 当面の目標はチュートリアルレベルでいろいろ作れるようになること。 いずれは自分で考えたアプリを実装していきたい。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?