AlertIOS
react-native線上運行器 方法
static alert(title: string, message?: string, buttons?: Array<{ text: ?string; onPress?: ?Function; }>, type?: string):無輸入彈出框
static prompt(title: string, value?: string, buttons?: Array<{ text: ?string; onPress?: ?Function; }>, callback?: Function):帶輸入框的彈出框 執行個體
/** * The examples provided by Facebook are for non-commercial testing and * evaluation purposes only. * * Facebook reserves all rights not expressly granted. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. * * @flow */'use strict';var React = require('react-native');var { StyleSheet, View, Text, TouchableHighlight, AlertIOS,} = React;exports.framework = 'React';exports.title = 'AlertIOS';exports.description = 'iOS alerts and action sheets';exports.examples = [{ title: 'Alerts', render() { return ( <View> <TouchableHighlight style={styles.wrapper} onPress={() => AlertIOS.alert( 'Foo Title', 'My Alert Msg' )}> <View style={styles.button}> <Text>Alert with message and default button</Text> </View> </TouchableHighlight> <TouchableHighlight style={styles.wrapper} onPress={() => AlertIOS.alert( null, null, [ {text: 'Button', onPress: () => console.log('Button Pressed!')}, ] )}> <View style={styles.button}> <Text>Alert with only one button</Text> </View> </TouchableHighlight> <TouchableHighlight style={styles.wrapper} onPress={() => AlertIOS.alert( 'Foo Title', 'My Alert Msg', [ {text: 'Foo', onPress: () => console.log('Foo Pressed!')}, {text: 'Bar', onPress: () => console.log('Bar Pressed!')}, ] )}> <View style={styles.button}> <Text>Alert with two buttons</Text> </View> </TouchableHighlight> <TouchableHighlight style={styles.wrapper} onPress={() => AlertIOS.alert( 'Foo Title', null, [ {text: 'Foo', onPress: () => console.log('Foo Pressed!')}, {text: 'Bar', onPress: () => console.log('Bar Pressed!')}, {text: 'Baz', onPress: () => console.log('Baz Pressed!')}, ] )}> <View style={styles.button}> <Text>Alert with 3 buttons</Text> </View> </TouchableHighlight> <TouchableHighlight style={styles.wrapper} onPress={() => AlertIOS.alert( 'Foo Title', 'My Alert Msg', '..............'.split('').map((dot, index) => ({ text: 'Button ' + index, onPress: () => console.log('Pressed ' + index) })) )}> <View style={styles.button}> <Text>Alert with too many buttons</Text> </View> </TouchableHighlight> </View> ); }},{ title: 'Prompt', render(): React.Component { return <PromptExample /> }}];class PromptExample extends React.Component { constructor(props) { super(props); this.promptResponse = this.promptResponse.bind(this); this.state = { promptValue: undefined, }; this.title = 'Type a value'; this.defaultValue = 'Default value'; this.buttons = [{ text: 'Custom cancel', }, { text: 'Custom OK', onPress: this.promptResponse }]; } render() { return ( <View> <Text style={{marginBottom: 10}}> <Text style={{fontWeight: 'bold'}}>Prompt value:</Text> {this.state.promptValue} </Text> <TouchableHighlight style={styles.wrapper} onPress={this.prompt.bind(this, this.title, this.promptResponse)}> <View style={styles.button}> <Text> prompt with title & callback </Text> </View> </TouchableHighlight> <TouchableHighlight style={styles.wrapper} onPress={this.prompt.bind(this, this.title, this.buttons)}> <View style={styles.button}> <Text> prompt with title & custom buttons </Text> </View> </TouchableHighlight> <TouchableHighlight style={styles.wrapper} onPress={this.prompt.bind(this, this.title, this.defaultValue, this.promptResponse)}> <View style={styles.button}> <Text> prompt with title, default value & callback </Text> </View> </TouchableHighlight> <TouchableHighlight style={styles.wrapper} onPress={this.prompt.bind(this, this.title, this.defaultValue, this.buttons)}> <View style={styles.button}> <Text> prompt with title, default value & custom buttons </Text> </View> </TouchableHighlight> </View> ); } prompt() { // Flow's apply support is broken: #7035621 ((AlertIOS.prompt: any).apply: any)(AlertIOS, arguments); } promptResponse(promptValue) { this.setState({ promptValue }); }}var styles = StyleSheet.create({ wrapper: { borderRadius: 5, marginBottom: 5, }, button: { backgroundColor: '#eeeeee', padding: 10, },});
效果
alert
prompt