LoginSignup
0
0

More than 3 years have passed since last update.

@dai_designing(Daisuke Mori)

【React Native入門】5-2 プラットフォーム固有の機能 iOSの独自UIコンポーネント

Last updated at Posted at 2019-11-01

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

(注)「5-1 Androidの独自UIコンポーネント」は一旦省略します。
iOS開発が一通り終わった後、学習予定です。

目次
[ P.220〜P.224 ] PickeriOSコンポーネント
[ P.220〜P.227 ] DatePickeriOSコンポーネント

[ P.228〜P.233 ] TabBarIOSを利用する
TabBarIOSはv0.59で削除されたとのこと
[ P.233〜P.236 ] TabBarIOSを利用する
こちらは不明です。念の為下記にコードのみ残します。

[ P.236〜P.240 ] ActionSheetIOSコンポーネント

[ P.224〜P.224 ] PickeriOSコンポーネント

        <PickerIOS
          selectedValue=値
          onValueChange=関数
        >
        ...必要な分だけ追加<PickerIOS.Item />...
        </PickerIOS>
App.js
import React, { Component } from 'react';
import { StyleSheet, Alert, Modal, Button, StatusBar, TextInput, ScrollView, PickerIOS, Text, View } from 'react-native';
import { Header, Tile } from 'react-native-elements';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';

export default class App extends Component {

  constructor(props) {
    super(props);
    this.items = [
      { title: 'one', value: '最初' },
      { title: 'two', value: '2番目' },
      { title: 'three', value: '3番目' },
      { title: 'four', value: '4番目' },
      { title: 'five', value: '最後' },
    ];
    this.state = {
      title: 'iOS UI',
      message: 'iOS UI Component.',
      value: '最初',
    };
  }

  render() {
    return (
      <View style={styles.base}>
        <Header
          leftComponent={{
            icon: 'menu', 
            color: 'white', 
            size: 25,
            onPress: this.doActionLeft
          }}
          centerComponent={{
            text: 'Sample App',
            style: styles.header
          }}
          rightComponent={{
            icon: 'android',
            color: 'white',
            size: 25,
            onPress: this.doActionRight
          }}
          otherContainerStyles={{
            height: 100,
            backgroundColor: '#dd0000'
          }}
          innerContainerStyles={{
            height: 100,
            backgroundColor: '#dd0000'
          }}
        />

        <View style={styles.body}>
          <Text style={ styles.title }>
            { this.state.title }
          </Text>
          <Text style={ styles.message }>
            { this.state.message }
          </Text>
        </View>

        <PickerIOS
          selectedValue={ this.state.value }
          style={ styles.picker }
          onValueChange={
            (value, index) => {
                this.setState({ value:value });
                Alert.alert('選択したのは' + value + 'です');
            }
          }
        >
          {
            this.items.map((item, index) =>
              <PickerIOS.Item
                key={ index }
                label={ item.title }
                value={ item.value }
              />
            )
          }
        </PickerIOS>

      </View>
    );
  }

  doActionLeft = () => { Alert.alert('Left icon tapped!'); }
  doActionRight = () => { Alert.alert('Right icon tapped!'); }
}

const styles = StyleSheet.create ({
  base: {
    padding: 0,
    flex: 1,
    backgroundColor: '#fff',
  },
  body: {
    padding: 10,
    flex: 1,
    backgroundColor: '#fff',
  },
  header: {
    color: '#fff',
    fontSize: 28,
    fontWeight: '100',
  },
  page: {
    paddingTop: 10,
    paddingLeft: 10,
    fontSize: 20,
  },
  title: {
    color: '#1e90ff',
    fontSize: 20,
  },
  message: {
    padding: 0,
    fontSize: 14,
  },
  picker: {
    backgroundColor: '#fcfcfc',
  }
});

[ P.220〜P.227 ] DatePickeriOSコンポーネント

<DatePickerIOS
 locale='言語'
 mode='date' // or time or datetime
 date=値
 onDateChange=関数
/>
App.js
import React, { Component } from 'react';
import { StyleSheet, Alert, Modal, Button, StatusBar, TextInput, ScrollView, PickerIOS, DatePickerIOS, Text, View } from 'react-native';
import { Header, Tile } from 'react-native-elements';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';

export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      title: 'iOS UI',
      message: 'iOS UI Component.',
      value: new Date(),
    };
  }

  render() {
    return (
      <View style={styles.base}>
        <Header
          leftComponent={{
            icon: 'menu', 
            color: 'white', 
            size: 25,
            onPress: this.doActionLeft
          }}
          centerComponent={{
            text: 'Sample App',
            style: styles.header
          }}
          rightComponent={{
            icon: 'android',
            color: 'white',
            size: 25,
            onPress: this.doActionRight
          }}
          otherContainerStyles={{
            height: 100,
            backgroundColor: '#dd0000'
          }}
          innerContainerStyles={{
            height: 100,
            backgroundColor: '#dd0000'
          }}
        />

        <View style={styles.body}>
          <Text style={ styles.title }>
            { this.state.title }
          </Text>
          <Text style={ styles.message }>
            { this.state.message }
          </Text>
        </View>

        <DatePickerIOS
          locale='ja'
          mode='date' // or time or datetime
          date={ this.state.value }
          style={ styles.picker }
          onDateChange={
            (value) => {
              this.setState({ value: value });
              Alert.alert('選択した日付は'　+　value.getFullYear() + '年'　+　(value.getMonth() + 1)　+　'月' + value.getDate() + '日です。');
            }
          }
        />

      </View>
    );
  }

  doActionLeft = () => { Alert.alert('Left icon tapped!'); }
  doActionRight = () => { Alert.alert('Right icon tapped!'); }
}

const styles = StyleSheet.create ({
  base: {
    padding: 0,
    flex: 1,
    backgroundColor: '#fff',
  },
  body: {
    padding: 10,
    flex: 1,
    backgroundColor: '#fff',
  },
  header: {
    color: '#fff',
    fontSize: 28,
    fontWeight: '100',
  },
  page: {
    paddingTop: 10,
    paddingLeft: 10,
    fontSize: 20,
  },
  title: {
    color: '#1e90ff',
    fontSize: 20,
  },
  message: {
    padding: 0,
    fontSize: 14,
  },
  picker: {
    backgroundColor: '#fcfcfc',
  }
});

原因不明　[ P.233〜P.236 ] TabBarIOSを利用する

App.js
import React, { Component } from 'react';
import { StyleSheet, Alert, Modal, Button, StatusBar, TextInput, ScrollView, PickerIOS, DatePickerIOS, SegmentedControlIOS, Text, View } from 'react-native';
import { Header, Tile } from 'react-native-elements';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';

export default class App extends Component {

  constructor(props) {
    super(props);
    this.items = ['One', 'Two', 'Three'];
    this.state = {
      title: 'iOS UI',
      message: 'iOS UI Component.',
      value: 'One',
    };
  }

  render() {
    return (
      <View style={styles.base}>
        <Header
          leftComponent={{
            icon: 'menu', 
            color: 'white', 
            size: 25,
            onPress: this.doActionLeft
          }}
          centerComponent={{
            text: 'Sample App',
            style: styles.header
          }}
          rightComponent={{
            icon: 'android',
            color: 'white',
            size: 25,
            onPress: this.doActionRight
          }}
          otherContainerStyles={{
            height: 100,
            backgroundColor: '#dd0000'
          }}
          innerContainerStyles={{
            height: 100,
            backgroundColor: '#dd0000'
          }}
        />

        <View style={styles.body}>

          <Text style={ styles.title }>
            { this.state.title }
          </Text>
          <Text style={ styles.message }>
            { this.state.message }
          </Text>

          <SegmentedControlIOS
            style={ styles.segCtl }
            values={this.items}
            selectedIndex={ this.state.value }
            onChange={ (event) => { this.setSegment(event); } }
          />

        </View>
      </View>
    );
  }

  setSegment = (event) => {
    var index = event.nativeEvent.selectedSegmentIndex;
    this.setState({ value: index });
    Alert.alert('select id=' + index + ':' + this.items[index]);
  }

  doActionLeft = () => { Alert.alert('Left icon tapped!'); }
  doActionRight = () => { Alert.alert('Right icon tapped!'); }
}

const styles = StyleSheet.create ({
  base: {
    padding: 0,
    flex: 1,
    backgroundColor: '#fff',
  },
  body: {
    padding: 10,
    flex: 1,
    backgroundColor: '#fff',
  },
  header: {
    color: '#fff',
    fontSize: 28,
    fontWeight: '100',
  },
  page: {
    paddingTop: 10,
    paddingLeft: 10,
    fontSize: 20,
  },
  title: {
    color: '#1e90ff',
    fontSize: 20,
  },
  message: {
    padding: 0,
    fontSize: 14,
  },
  picker: {
    backgroundColor: '#fcfcfc',
  }
});

[ P.236〜P.240 ] ActionSheetIOSコンポーネント

<Text style={ styles.btn }
 onPress={ this.名前 }>
 CLICK
</Text>
...
名前 = () => {
　ActionSheetIOS.showActionSheetWithOptions(オプション,関数);
}
App.js
import React, { Component } from 'react';
import { StyleSheet, Alert, Modal, Button, StatusBar, TextInput, ScrollView, PickerIOS, DatePickerIOS, ActionSheetIOS,Text, View } from 'react-native';
import { Header, Tile } from 'react-native-elements';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';

export default class App extends Component {

  constructor(props) {
    super(props);
    this.buttons = [
      'One', 
      'Two', 
      'Three',
      'Delete', 
      'Cancel',
    ];
    this.state = {
      title: 'iOS UI',
      message: 'iOS UI Component.',
      value: 'none',
    };
  }

  render() {
    return (
      <View style={styles.base}>
        <Header
          leftComponent={{
            icon: 'menu', 
            color: 'white', 
            size: 25,
            onPress: this.doActionLeft
          }}
          centerComponent={{
            text: 'Sample App',
            style: styles.header
          }}
          rightComponent={{
            icon: 'android',
            color: 'white',
            size: 25,
            onPress: this.doActionRight
          }}
          otherContainerStyles={{
            height: 100,
            backgroundColor: '#dd0000'
          }}
          innerContainerStyles={{
            height: 100,
            backgroundColor: '#dd0000'
          }}
        />

        <View style={styles.body}>

          <Text style={ styles.title }>
            { this.state.title }
          </Text>
          <Text style={ styles.message }>
            clicked: { this.state.value }
          </Text>

          <Text style={ styles.btn }
            onPress={ this.showActionSheet }>
            CLICK
          </Text>

        </View>
      </View>
    );
  }

  showActionSheet = () => {
    ActionSheetIOS.showActionSheetWithOptions({
      options: this.buttons,
      canselButtonIndex: 4,
      destructiveButtonIndex: 3,
    },
    (index) => {
      this.setState({ value: this.buttons[index] });
    });
  }

  doActionLeft = () => { Alert.alert('Left icon tapped!'); }
  doActionRight = () => { Alert.alert('Right icon tapped!'); }
}

const styles = StyleSheet.create ({
  base: {
    padding: 0,
    flex: 1,
    backgroundColor: '#fff',
  },
  body: {
    padding: 10,
    flex: 1,
    backgroundColor: '#fff',
  },
  header: {
    color: '#fff',
    fontSize: 28,
    fontWeight: '100',
  },
  page: {
    paddingTop: 10,
    paddingLeft: 10,
    fontSize: 20,
  },
  title: {
    color: '#1e90ff',
    fontSize: 20,
  },
  message: {
    padding: 0,
    fontSize: 14,
  },
  btn: {
    marginTop: 20,
    padding: 15,
    fontSize: 16,
    textAlign: 'center',
    color: '#fff',
    backgroundColor: '#1e90ff',
  }
});
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0