Как вызвать React Native настраиваемое оповещение как функцию? - PullRequest
Новая
       12

Как вызвать React Native настраиваемое оповещение как функцию?

0 голосов
/ 03 июня 2019

Я занимаюсь разработкой приложения React Native. Я создал свой собственный alert как component, используя modal. Когда я его использую, мне всегда нужно добавлять мой alert компонент в мою render() функцию.

Есть ли способ использовать пользовательское оповещение, не отображая его внутри моей функции render()?

Я имею в виду, я могу использовать Alert в react-native, называя его Alert.alert(). Я тоже хочу использовать свое собственное оповещение.

Как я могу это сделать?

Ответы [ 3 ]

0 голосов
/ 03 июня 2019

Сделать метод статическим. 

class MyCustomAlert extends React.Component {
  static alert () {
  }
}

использование 

import MyCustomAlert from './MyCustomAlert';

MyCustomAlert.alert()
0 голосов
/ 03 июня 2019

Вы также можете использовать этот API response-native-popup-dialog для разработки вашего оповещения.

Лично я сделал что-то подобное: 

  ...
  <Dialog
  visible={this.props.visible}>
    <DialogContent>
      <View style={ container }>
        <Text style={ title }> { this.props.title } </Text>
        <Text style={ text }> { this.props.text } </Text>
        <View style={ buttonView }>
          <TouchableOpacity style={ button } onPress={ this.props.validationAction }>
            <Text style={ buttonText }>{ this.props.validationText }</Text>
          </TouchableOpacity>
        </View>
      </View>
    </DialogContent>
  </Dialog>
  ...

И родитель: 

<Alert
visible={ this.state.visible }
title={ "Alert title" }
text={ "This is an custom alert." }
validationText={ "OK" }
validationAction={ () =>  {
  this.setState({ visible: false });
}} />

Надеюсь, это поможет.

0 голосов
/ 03 июня 2019

Alert.alert() вызывает собственный код. Если вы хотите отобразить свой пользовательский компонент оповещения, вам нужно добавить его в ваш метод рендеринга. Было бы проще поместить его в корень или какой-либо другой родительский компонент.

Установите компонент, который будет отображаться условно. Создайте метод для установки условия. Вы можете передать этот метод своим дочерним компонентам. 

this.alertToggle = (displayAlert) => this.setState({displayAlert});

render(){
  return (
      <Parent>
        {this.state.displayAlert && <CustomAlert/>}
        <Child alertToggle={this.alertToggle}
      </Parent>
    )
}

Вы можете позвонить this.props.alertToggle(true), чтобы отобразить компонент оповещения в родительском элементе.

РЕДАКТИРОВАТЬ: Так как вы сделали компонент с использованием модального, вы можете передать отображение логического к компоненту CustomAlert и запустить модальное внутри компонента. <CustomAlert displayAlert={this.state.displayAlert} /> Идея размещения настраиваемого оповещения у родителя такая же.

...