如何在React Native中使用自定义警报?

时间:2019-05-26 06:51:29

标签: javascript react-native alert

我已经在React Native中创建了一个自定义警报作为组件。我使用<div class="table-responsive"> <table class="table center-aligned-table"> <thead> <tr class="text-primary"> <th>Question No</th> <th>Question Name</th> <th>Answer:</th> <th> </th> <th> </th> <th></th> <th></th> <th></th> </tr> </thead> <tbody> <% try{ int oopa=1; //String nme=(String)session.getAttribute("vname7"); DbCon cc=new DbCon(); Connection onn=cc.fun(); Statement stt=onn.createStatement(); ResultSet r=stt.executeQuery("select ques,ans from postquestion;"); while(r.next()){ %> <tr class=""> <td><center><%=oopa++%></center></td> <td><%=r.getString(1)%></td> <% if(r.getString(2)==null) { %> <td><a href="">Edit</a></td> <% } else { %> <td><%=r.getString(2)%></td> <% } %> <td> </td> </tr> <% } } catch(Exception vjin){ System.out.println("I am vjin: "+vjin); vjin.printStackTrace(); } %> </tbody> </table> </div> 来创建此自定义警报。我的问题是,如何使用它?我不想在React Native中使用Modal,而是要显示自己的警报。

这是我的Alert.alert

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>
    );
  }
}

能帮我解决这个问题吗?

1 个答案:

答案 0 :(得分:3)

在您的catch块中将isVisible设置为true。

AppTabController appTabController = new AppTabController(mLength:10, mVsync:new myTickerProvider());

class TabController extends ChangeNotifier {
  int length;
  TabController({
    int initialIndex = 0,
    @required this.length,
    @required TickerProvider vSync
  }) : assert(length != null),
       assert(vSync != null);
} //end of TabController

class AppTabController extends TabController {

  AppTabController({int mInitialIndex,
      int mLength,
      TickerProvider mVsync}):super(length: mLength, vSync: mVsync);
}


class myTickerProvider extends TickerProvider{
  @override
  Ticker createTicker(onTick) {
    // TODO: implement createTicker
    return null;
  }
}