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

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

More than 1 year has passed since last update.

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 にて作成されたコードに公式ドキュメントにあるコードを貼って実行。

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

"Learn More" をクリック

スクリーンショット 2018-01-03 15.43.16.png

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

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

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

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

TouchableOpacity でのボタンの実装

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

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

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

出来ました。

標準コンポーネントでは少し足りなさそうですね。
いつか 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

Why do not you register as a user and use Qiita more conveniently?
  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
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