react-native试玩(28)-弹出框API

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