React Nativeでボタンを表示させる場合、Buttonコンポーネントを利用する。

Buttonコンポーネントのインポート

コンポーネントを利用するにあたり、まずはインポートが必要だ。

import React, { Component } from 'react';
import { View, Button } from 'react-native';

基本の使い方

まずはシンプルな例から見ていこう。

HTMLのbuttonタグと違って、Buttonコンポーネントは子要素を持たない。

import React, { Component } from 'react';
import { View, Button } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
        <Button
          onPress={() => console.warn('pressed!')}
          title={'Press'}
        />
      </View>
    );
  }
}

なお、ボタンに表示する文字は、title属性を使って表示させる。

また、onPress属性を使えばボタン押下時のイベントを指定することもできる。

onPress属性に関数を指定する

実際はonPress属性には関数を指定することが多いだろう。

以下の例では別途用意したshowWarning関数を指定している。

import React, { Component } from 'react';
import { View, Button } from 'react-native';

export default class App extends Component {
  showWarning() {
    console.warn('pressed!');
  }
  render() {
    return (
      <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
        <Button
          onPress={() => this.showWarning()}
          title={'Press'}
        />
      </View>
    );
  }
}

表示されたボタンを押すと、showWarning関数が実行され、コンソール上に「pressed!」と表示されるはずだ。