Question

我有一个单击按钮时会调用的函数。在此函数中，我插入一个组件以显示警报（ react-native-scl-alert ）

该呼叫进入该功能（已打印控制台日志），但警报不起作用，您知道为什么吗？我做错了什么？

谢谢

constructor(props) {
    super(props);
this.state = {
//Alert
  show: false
};


alertFeedback() {
    this.setState({ show: true })
    console.log("Inside Alert Feedback")
    if (this.props.Roles == "ROLE") {

        <SCLAlert
          theme="info"
          show={this.state.show}
          title="Lorem"
          subtitle="Lorem ipsum dolor"
          onRequestClose={()=>{}}
        >
          <SCLAlertButton theme="info" onPress={this.stopConnection} >Done1</SCLAlertButton>
          <SCLAlertButton theme="success" onPress={this.stopConnection}>Done2</SCLAlertButton>
          <SCLAlertButton theme="danger" onPress={this.stopConnection}>Done3</SCLAlertButton>
        </SCLAlert>


    } else {
      this.stopConnection();
    }
  }

  stopConnection() {
    this.setState({ show: false })


render() {
    return (
<View style={activity.button}>
            <TouchableOpacity
              style={[style.button, style.buttonOK]}
              onPress={() => this.alertFeedback()}
            >
              <Text style={style.buttonTesto}>Stop</Text>
            </TouchableOpacity>
)}

Answer 1

下面的代码必须始终在组件的render函数中编写，并且对于条件警报，值this.state.show在要显示时应为true。

渲染器应该看起来像这样

render() {
        return (
            <View style={activity.button}>
                <SCLAlert
                    theme="info"
                    show={this.state.show}
                    title="Lorem"
                    subtitle="Lorem ipsum dolor"
                    onRequestClose={() => { }}
                >
                    <SCLAlertButton theme="info" onPress={this.stopConnection} >Done1</SCLAlertButton>
                    <SCLAlertButton theme="success" onPress={this.stopConnection}>Done2</SCLAlertButton>
                    <SCLAlertButton theme="danger" onPress={this.stopConnection}>Done3</SCLAlertButton>
                </SCLAlert>
                <TouchableOpacity
                    style={[style.button, style.buttonOK]}
                    onPress={() => this.alertFeedback()}
                >
                    <Text style={style.buttonTesto}>Stop</Text>
                </TouchableOpacity>
            </View>
        )
    }

所以，当

if (this.props.Roles == "ROLE") {
    this.setState({show:true})
}

不要忘记在类中的构造函数中初始化show

constructor(props) {
        super(props)
        this.state = {
            show: false,
    };
}

我希望这可以帮助......谢谢:)

Answer 2

根据您的代码，您没有呈现警报，您应该添加一些关键检查并基于以下内容显示警报：

  constructor(props) {
    super(props);
    this.state = {
     //Alert
     show: false,
     showAlert:false
    };


  alertFeedback() {
    this.setState({ show: true })
    console.log("Inside Alert Feedback")
    if (this.props.Roles == "ROLE") {

    this.setState({ showAlert: true})


    } else {
      this.stopConnection();
    }
  }

  stopConnection() {
    this.setState({ show: false })


   render() {
    return (
    <View style={activity.button}>
    <div>
            <TouchableOpacity
              style={[style.button, style.buttonOK]}
              onPress={() => this.alertFeedback()}
            >
              <Text style={style.buttonTesto}>Stop</Text>
            </TouchableOpacity>

     {this.state.showAlert
      ?  <SCLAlert
          theme="info"
          show={this.state.show}
          title="Lorem"
          subtitle="Lorem ipsum dolor"
          onRequestClose={()=>{}}
        >
          <SCLAlertButton theme="info" onPress={this.stopConnection} 
         >Done1</SCLAlertButton>
          <SCLAlertButton theme="success" onPress= 
         {this.stopConnection}>Done2</SCLAlertButton>
          <SCLAlertButton theme="danger" onPress= 
           {this.stopConnection}>Done3</SCLAlertButton>
        </SCLAlert> 
     :""
</div>

)}

希望这会起作用！

Answer 3

您需要返回SCAlert对话框，因为您没有在render（）方法中编写它。

constructor(props) {
    super(props);
this.state = {
//Alert
  show: false
};


alertFeedback() {
    this.setState({ show: true })
    console.log("Inside Alert Feedback")
    if (this.props.Roles == "ROLE") {
      return (
        <SCLAlert
          theme="info"
          show={this.state.show}
          title="Lorem"
          subtitle="Lorem ipsum dolor"
          onRequestClose={()=>{}}
        >
          <SCLAlertButton theme="info" onPress={this.stopConnection} >Done1</SCLAlertButton>
          <SCLAlertButton theme="success" onPress={this.stopConnection}>Done2</SCLAlertButton>
          <SCLAlertButton theme="danger" onPress={this.stopConnection}>Done3</SCLAlertButton>
        </SCLAlert>
     )

    } else {
      this.stopConnection();
    }
  }

  stopConnection() {
    this.setState({ show: false })


render() {
    return (
<View style={activity.button}>
            <TouchableOpacity
              style={[style.button, style.buttonOK]}
              onPress={() => this.alertFeedback()}
            >
              <Text style={style.buttonTesto}>Stop</Text>
            </TouchableOpacity>
)}

在函数内插入Alert

3 个答案: