Question

如何为我的反应应用程序首次访问弹出窗口？是否可以使用react-popup模块实现？我在下面使用了这个模块，但它似乎不起作用。你能检查一下，让我知道这里有什么不妥。

以下是我的主页：

export class PaymentPage   {

    total_amount:number;

    constructor(public navCtrl: NavController,
          public products: ProductsService) {

               var MyProducts=[
               {
                 "amount": 999,
                 ...
                 },
                 {
                 "amount": 4900,
                  ...
                  }
                ];

              var amount:number;
              for (var product in MyProducts) {
                amount += (MyProducts[product]['amount'])*MyProducts[product]['quantity'];
              }
              this.total_amount=amount/100

Answer 1

是的，您可以在登录或登陆页面后立即添加弹出窗口。

在您的组件中，添加以下代码段

import React, {Component} from 'react';
import './HomePage.css';
import Carousel from 'nuka-carousel';
import HeaderComponent from '../../components/Header/Header.js';
import {Decorators} from './decorators.js';
import Popup from 'react-popup'


class HomePage extends Component {
    redirectPage = () => {
    window.location = '#/dashboard';
  }

    componentWillMount(){
      Popup.alert('my component')
    }

  render() {
      var mixins = [Carousel.ControllerMixin];
      return (
          <div>
              <div className='explore-button-container'>
                  <button id='exploreBtn' onClick={this.redirectPage}>Explore</button>
              </div>

              <HeaderComponent id='header' location={this.props.location}/>
              <Carousel
                 autoplay={true}
                 autoplayInterval={3000}
                 wrapAround={true}>
                 //Carousel Content
              </Carousel>
        </div>
     );
   }
  }
}

componentWillMount（）是一个生命周期钩子，它将在呈现关注组件之前执行一组语句。

然后，通过所有lifecycle components available进行反应。

Answer 2

在设置中添加一些指示，例如AsyncStorage，然后检查它是否是第一次运行应用程序：

try {
  const value = await AsyncStorage.getItem('@isAppFirstTimeRunning');
  if (value !== 'true'){
    // not first time running
    ShowThePopUp();
  }
  else {
     AsyncStorage.setItem('@isAppFirstTimeRunning', 'true');
  }
} catch (error) {
  // Error retrieving data
}

Answer 3

在componentDidMount中，您可以访问localstorage和sessionStorage，您可以在其中设置标志（如果这是第一次访问）。像这样的东西：

class myComponent(){
    constructor(){//do stuff here}
    componentDidMount(){
        let visited = localStorage["alreadyVisited"];
        if(visited) {
             this.setState({ viewPopup: false })
             //do not view Popup
        } else {
             //this is the first time
             localStorage["alreadyVisited"] = true;
             this.setState({ viewPopup: true});
        }
    render() {
        return(<Modal
                aria-labelledby='modal-label'
                autoFocus={false}
                style={modalStyle}
                backdropStyle={backdropStyle}
                show={this.state.viewPopup}
                onHide={this.close}>
                  <div style={dialogStyle()} >
                    I'm the Popup Text
                  </div>
                </Modal>);
     }
}

这就是我用Modal解决它的方法，但我相信你也可以用Popup来解决它。如果要在每次首次访问会话时查看弹出窗口，可以使用sessionStorage而不是localstorage。请记住，您必须设置样式。您可以在此处查看示例：https://react-bootstrap.github.io/react-overlays/

在反应应用程序中创建第一次访问弹出窗口？

3 个答案: