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

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

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

目次
[ P.220〜P.224 ] PickeriOSコンポーネント
[ P.220〜P.227 ] DatePickeriOSコンポーネント
<font color="Red">
[ P.228〜P.233 ] TabBarIOSを利用する
TabBarIOSはv0.59で削除されたとのこと
[ P.233〜P.236 ] TabBarIOSを利用する
こちらは不明です。念の為下記にコードのみ残します。
</font>
[ P.236〜P.240 ] ActionSheetIOSコンポーネント

---

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

```js
        <PickerIOS
          selectedValue=値
          onValueChange=関数
        >
        ...必要な分だけ追加<PickerIOS.Item />...
        </PickerIOS>
```

```js: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コンポーネント

```js
<DatePickerIOS
 locale='言語'
 mode='date' // or time or datetime
 date=値
 onDateChange=関数
/>
```

```js: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コンポーネント

```js
<Text style={ styles.btn }
 onPress={ this.名前 }>
 CLICK
</Text>
...
名前 = () => {
　ActionSheetIOS.showActionSheetWithOptions(オプション,関数);
}
```

```js: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',
  }
});
```