React Native の習得：コンポーネント[button]

# React Native の習得：コンポーネント[button]

React Native 標準のコンポーネントについて使い方を見ていきます。
まずは button コンポーネントを使って見ます。


# 実行環境

Mac: MacBook Air
macOS 10.13.1 (High Sierra)

Xcode 9.2
node.js: v6.11.5

react-native-cli: 2.0.1
react: 16.0.0
react-native: 0.51.0

# ボタンコードの貼り付け

react-native init myapp にて作成されたコードに公式ドキュメントにあるコードを貼って実行。

```js

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

export default class App extends Component<{}> {
  onPressLearnMore() {
    Alert.alert('ボタンを押しました！')
  }
  render() {
    return (
      <View style={styles.container}>
        <Button
          onPress={this.onPressLearnMore}
          title="Learn More"
          color="#841584"
          accessibilityLabel="Learn more about this purple button"
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
```

シミュレータ実行結果

![スクリーンショット 2018-01-03 15.40.36.png](https://qiita-image-store.s3.amazonaws.com/0/141148/af391b72-51f4-2b78-a52d-08f967a53052.png)

"Learn More" をクリック

![スクリーンショット 2018-01-03 15.43.16.png](https://qiita-image-store.s3.amazonaws.com/0/141148/1bbe2644-000c-196a-51b8-31dc0daf635a.png)


いちおう動作しました。
ただ、ボタンっぽくないですね。ios の場合 color を指定すると、テキストのカラーを設定し android だと背景色だけが設定されるようです。

そこで `<view>` で囲って背景色を設定し少しだけボタンらしくして見ます。

```js
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Alert,
  Text,
  Button,
  View
} from 'react-native';

export default class App extends Component<{}> {
  _onPressButton() {
    Alert.alert('ボタンを押しました！')
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.buttonContainer}>
          <Button
            onPress={this._onPressButton}
            title="start"
          />
        </View>
        <View style={styles.buttonContainer}>
          <Button
            onPress={this._onPressButton}
            title="stop"
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#333333',
  },
  buttonContainer: {
    height: 100,
    width: 200,
    padding: 10,
    backgroundColor: '#FFFFFF',
    margin: 3
  },
});
```

![スクリーンショット 2018-01-03 15.48.35.png](https://qiita-image-store.s3.amazonaws.com/0/141148/33ec89c1-cc2a-3d97-097d-6dfbd0950959.png)


少しボタンらしくなりました。

# TouchableOpacity でのボタンの実装

TouchableOpacity でも同様のことができるとのことで試して見ました。

合わせて border-radius を設定して、角を丸くして見ます。

```js
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Alert,
  Text,
  TouchableOpacity,
  Button,
  View
} from 'react-native';

export default class App extends Component<{}> {
  _onPressButton() {
    Alert.alert('You tapped the button!')
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this._onPressButton} style={styles.button}>
           <Text>start</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this._onPressButton} style={styles.button}>
           <Text>end</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#333333',
  },
  button: {
    width: 250,
    height: 100,
    padding: 10,
    borderRadius: 10,
    backgroundColor: 'lightgray',
    alignItems: 'center',
    justifyContent: 'center',
    margin: 3
  },
});
```

実行結果

![スクリーンショット 2018-01-03 15.53.47.png](https://qiita-image-store.s3.amazonaws.com/0/141148/0445e6c4-7608-1d6a-75fd-af0dd5af3a0a.png)


出来ました。

標準コンポーネントでは少し足りなさそうですね。
いつか react-native-elements に挑戦してみようと思います。

# 参考ページ

https://facebook.github.io/react-native/docs/0.51/components-and-apis.html

https://facebook.github.io/react-native/docs/0.51/button.html