読者です 読者をやめる 読者になる 読者になる

望月いちろうのREADME.md

書き溜めておいた技術記事や旅行記のバックアップです。

AlertIOS

React

AlertIOSは主に二つの機能を提供している、alertとpromptである。AlertIOS.alertで使用可能なすべての機能はAlert.alertでクロスプラットフォームで利用可能ですのでiOSに限定された機能を使用しない場合はこちらを利用することをおすすめします。

AlertIOS.promptはAlertのポップアップでデータの入力を促します。

メソッド

static alert(title, message?, callbackOrButtons?, type?)

ユーザーに通知するポップアップを作成する。Alertを参照のこと

  • title: ダイアログのタイトル
  • message: 入力窓の上部に表示するメッセージ(入力は任意)
  • callbackOrButtons: 1つの引数を持つ関数かボタンの配列を持つ(入力は任意)もし関数を渡した場合はユーザーがOKを押したときに発火するコールバックになる。
AlertIOS.alert( 'Sync Complete', 'All your data are belong to us.' );

static prompt(title, message?, callbackOrButton?, type?, defaultValue?)

ユーザーに値の入力を促すプロンプトを表示する。

  • title: ダイアログのタイトル
  • message: 入力窓の上部に表示するメッセージ(入力は任意)
  • callbackOrButtons: 1つの引数を持つ関数かボタンの配列を持つ(入力は任意)もし関数を渡した場合はユーザーがOKを押したときに発火するコールバックになる。 ボタンの設定オブジェクトの設定は順番にtext,onPressそしてstyleを指定する。styleは'default','cancel'または'destructive'のいずれかを指定する。
  • type: テキスト入力の設定、'plain-text'、'secure-text'また'login-password'のいずれかを選択する。
  • defaultValue: 入力窓のテキストのデフォルト値を設定する。

AlertIOS.prompt( 'Enter password', 'Enter your password to claim your $1.5B in lottery winnings', [ {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}, {text: 'OK', onPress: password => console.log('OK Pressed, password: ' + password)}, ], 'secure-text' );

デフォルトのボタンとカスタムコールバックを設定した例

AlertIOS.prompt( 'Update username', null, text => console.log("Your username is "+text), null, 'default' )
'use strict'; var React = require('react'); var ReactNative = require('react-native'); var { StyleSheet, View, Text, TouchableHighlight, AlertIOS, } = ReactNative; var { SimpleAlertExampleBlock } = require('./AlertExample'); exports.framework = 'React'; exports.title = 'AlertIOS'; exports.description = 'iOS alerts and action sheets'; exports.examples = [{ title: 'Alerts', render() { return <SimpleAlertExampleBlock />; } }, { title: 'Prompt Options', render(): ReactElement<any> { return <PromptOptions />; } }, { title: 'Prompt Types', render() { return ( <View> <TouchableHighlight style={styles.wrapper} onPress={() => AlertIOS.prompt('Plain Text Entry')}> <View style={styles.button}> <Text> plain-text </Text> </View> </TouchableHighlight> <TouchableHighlight style={styles.wrapper} onPress={() => AlertIOS.prompt('Secure Text', null, null, 'secure-text')}> <View style={styles.button}> <Text> secure-text </Text> </View> </TouchableHighlight> <TouchableHighlight style={styles.wrapper} onPress={() => AlertIOS.prompt('Login & Password', null, null, 'login-password')}> <View style={styles.button}> <Text> login-password             </Text> </View> </TouchableHighlight> </View> ); } }]; class PromptOptions extends React.Component { state: any; customButtons: Array<Object>; constructor(props) { super(props); // $FlowFixMe this seems to be a Flow bug, `saveResponse` is defined below this.saveResponse = this.saveResponse.bind(this); this.customButtons = [{ text: 'Custom OK', onPress: this.saveResponse }, { text: 'Custom Cancel', style: 'cancel', }]; this.state = { promptValue: undefined, }; } render() { return ( <View> <Text style={{marginBottom: 10}}> <Text style={{fontWeight: 'bold'}}>Prompt value:</Text> {this.state.promptValue} </Text> <TouchableHighlight style={styles.wrapper} onPress={() => AlertIOS.prompt('Type a value', null, this.saveResponse)}> <View style={styles.button}> <Text> prompt with title & callback </Text> </View> </TouchableHighlight> <TouchableHighlight style={styles.wrapper} onPress={() => AlertIOS.prompt('Type a value', null, this.customButtons)}> <View style={styles.button}> <Text> prompt with title & custom buttons </Text> </View> </TouchableHighlight> <TouchableHighlight style={styles.wrapper} onPress={() => AlertIOS.prompt('Type a value', null, this.saveResponse, undefined, 'Default value')}> <View style={styles.button}> <Text> prompt with title, callback & default value </Text> </View> </TouchableHighlight> <TouchableHighlight           style={styles.wrapper} onPress={() => AlertIOS.prompt('Type a value', null, this.customButtons, 'login-password', 'admin@site.com')}> <View style={styles.button}> <Text> prompt with title, custom buttons, login/password & default value </Text> </View> </TouchableHighlight> </View> ); } saveResponse(promptValue) { this.setState({ promptValue: JSON.stringify(promptValue) }); } } var styles = StyleSheet.create({ wrapper: { borderRadius: 5, marginBottom: 5, }, button: { backgroundColor: '#eeeeee', padding: 10, }, });