Как использовать настраиваемое оповещение в React Native? - PullRequest
1 голос
/ 26 мая 2019

Я создал пользовательское оповещение как компонент в React Native. Я использовал Modal для создания этого настраиваемого оповещения. Моя проблема, как это использовать? Вместо использования Alert.alert в React Native я хочу отобразить свое собственное предупреждение.

Вот мой Custom Alert Modal.

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import Modal from 'react-native-modal';

import styles from './style';
import Button from '../../components/Button';

export default class CustomAlert extends Component {

  renderModalContent = () => (
    <View style={styles.content}>
      <Text style={styles.contentTitle}>{this.props.title}</Text>
      <Text style={styles.contentInfo}>{this.props.content}</Text>
      <View style={styles.buttonContainer}>
        <Button
          color={this.props.buttonColor}
          text={this.props.buttonText}
          onPress={this.props.buttonOnPress}
        />
      </View>
    </View>
  );

  render() {
    return (
      <View style={styles.container}>
        <Modal
          isVisible={this.props.isVisible}
          backdropColor="#000000"
          backdropOpacity={0.9}
          animationIn="zoomInDown"
          animationOut="zoomOutUp"
          animationInTiming={600}
          animationOutTiming={600}
          backdropTransitionInTiming={600}
          backdropTransitionOutTiming={600}
        >
          {this.renderModalContent()}
        </Modal>
      </View>
    );
  }
}

Вот как я хочу это использовать. Я хочу отобразить это предупреждение через функцию. Это означает, что когда функция обнаруживает ошибку, я хочу показать свое пользовательское предупреждение.

myFunction()
  .then(() => // do something)
  .catch(() => // show my custom alert);

Можете ли вы помочь мне решить эту проблему?

1 Ответ

3 голосов
/ 26 мая 2019

set isVisible true в вашем блоке catch.

myFunction()
 .then(() => // do something)
 .catch((e) => this.setState({ isVisible: true }))
...