React Nativeで無効なボタンを作るTips

さっそく作ってみる

react-native init は省略

Buttonコンポーネントを読み込んで

import {
  //省略
  Button
} from 'react-native';

disabledオブションをつけるだけ

<Button
 disabled
 onPress={() => console.log('test')}
 title="押せないボタン"
/>

こんな感じのボタンが出来ます。

これを使ってちょっとしたアプリを作ってみました

頭を振り絞って思いついたしょうもない例です。

disabledオプションはtrueを渡すと無効falseで有効なボタンになります。

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

export default class AwesomeProject extends Component {

  state = {disabled: false}

  render() {
    return (
      <View style={styles.container}>

      <Button
        disabled={this.state.disabled}
        onPress={this.onButtonPress.bind(this)}
        title="１回だけ押せます"
      />

      </View>
    );
  }

  onButtonPress() {
    Alert.alert('このボタンは無効になりました');
    this.setState({disabled: true});
　}
}

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

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

ブログでもButtonについての記事を書いたので、もっと知りたい方はどうぞ
http://st--blog.blogspot.jp/2017/01/hello.html