hcmobile-sdk/components/Alert/AlertDemo.js

mobile-sdk

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

import AlertHC from './AlertHC';

class Button extends Component {
  render() {
    return (
      <TouchableHighlight
        onPress={() => this.props.onPress()}
        style={[styles.button, this.props.style]}
      >
        <Text style={styles.buttonText}>{this.props.text}</Text>
      </TouchableHighlight>
    )
  }
}

export default class AlertDemo extends Component {

  constructor (props) {
    super(props)
    this.state = {

    }
  }

  showAlert() {
    AlertHC.alert(
      'Alert Title',
      'alertMessage',
      [
        {text: 'Cancel', onPress: () => console.log('Cancel Pressed!'), style: 'cancel',},
        {text: 'Ok', onPress: () => console.log('OK Pressed!')},
        {text: 'Destructive', onPress: () => console.log('Destructive Pressed!'), style: 'destructive',},
        {text: 'Destructive123', onPress: () => console.log('Destructive Pressed!'), style: 'destructive',},
      ],
    );
  }

  showPrompt() {
    AlertHC.alert(
      'Alert Title',
      'alertMessage',
      [
        {text: 'Ok1', onPress: (text) => console.log('Ok Pressed!' + text)},
        {text: 'Ok2', onPress: (text) => console.log('Ok Pressed!' + text), style: 'cancel'},
        {text: 'Ok3', onPress: (text) => console.log('Ok Pressed!' + text)},
      ],
      'plain-text',
      '',
      1,
      true
    );
  }

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

        <Button onPress={() => {this.showAlert()}} text={'Show AlertView'}/>
        <Button onPress={() => {this.showPrompt()}} text={'Show PromptView'}/>

        <Text style={styles.welcome}>
          Welcome home,good hunter!
        </Text>
        
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  button: {
    backgroundColor: 'rgb(255, 102, 1)',
    height: 40,
    padding: 10,
    margin: 20
  },
  buttonText: {
    color: 'white',
    fontSize: 14
  }
});