在反应js应用程序中的页面之间导航时，前一页的Flash

Question

我正在为ios和android开发一个react js应用程序。在我的应用程序从一个页面导航到另一个页面时，前一页的闪存显示1秒钟然后我的下一页正在加载。此问题仅在ios应用程序中很普遍。

检查浏览器Safari，chrome.Only在应用程序中时不会出现问题

请提供解决方案。

Answer 1

我们没有使用react native和react路由器。很少有页面在reactjs中开发并集成到现有的移动应用程序中。

在上面的代码中：

else {
console.log('clicked');
window.location.href = path + '?id=' + id + '&time=' `window.sessionStorage.getItem('time') + '&prodId=' + productId + '&qty=' + `qty + '&storeCall=true';
}

在这里我们使用window.location.href导航到另一个jsx页面导航ios app.Flash中的问题导致上一页显示一秒钟

Answer 2

import React from 'react';
import Copyright from './Copyright.jsx';
import { browserHistory } from 'react-router';
import axios from 'axios';
import envConstant from '../../../../../config/labelConstants.js';
import { ClipLoader } from 'react-spinners';
var x=0;


let submitOrder, flag = "false", footerBtn = '', vendor;
let closeFunc;
class Footer extends React.Component {

 constructor(props) {
 super(props);
 this.orderSubmit = this.orderSubmit.bind(this);
 this.validateSubmit = this.validateSubmit.bind(this);
 this.validateNetwork = this.validateNetwork.bind(this);
 this.disableBtn = this.disableBtn.bind(this);
 this.state = {
 data: 'Initial data....',
 price: 'total',
 loading:false
 }
 this.propTypes = {
 alertFunc: React.PropTypes.func,
 couponAvail: React.PropTypes.func,
 alertClose:React.PropTypes.func
 };
 };
 validateSubmit() {

 const react = this;
 var submit = false;
 var phoneNum;
 var fname = this.props.UserDetails.refs.fname.value;
 var lname = this.props.UserDetails.refs.lname.value;
 var phone = this.props.UserDetails.refs.phone.value.replace(/[-.]/gi, '');
 if (phone != null) {
 phoneNum = phone.toString();
 }
 var email = this.props.UserDetails.refs.email.value;
 var agree = window.sessionStorage.getItem('agree');
 submitOrder = {};
 let prodId, qty;

 if (null == window.sessionStorage.getItem('prodID') && null == window.sessionStorage.getItem('qty')) {
 prodId = window.sessionStorage.getItem('initprodID');
 qty = 1;
 } else {
 prodId = window.sessionStorage.getItem('prodID');
 qty = window.sessionStorage.getItem('qty');
 }

 submitOrder = {
 fname: this.props.UserDetails.refs.fname.value,
 lname: this.props.UserDetails.refs.lname.value,
 coupon: window.sessionStorage.getItem('successCoupon'),
 email: this.props.UserDetails.refs.email.value,
 phoneNum: this.props.UserDetails.refs.phone.value.replace(/[-.]/gi, ''),
 id: window.sessionStorage.getItem('id'),
 qty: qty,
 prodID: prodId,
 emailOptIn: window.sessionStorage.getItem('emailOptIn'),
 smsOptIn: window.sessionStorage.getItem('smsOptIn'),

 time: window.sessionStorage.getItem('time')

 };

 if (fname == null || fname == '') {
 this.props.alertFunc(envConstant.enterDetails,react.props.UserDetails.refs.fname);
 submit = false;

 return false;
 }
 if (lname == null || lname == '') {
 this.props.alertFunc(envConstant.enterDetails,react.props.UserDetails.refs.lname);
 submit = false;

 return false;
 }
 if (phoneNum == null || phoneNum == '') {
 this.props.alertFunc(envConstant.enterDetails,react.props.UserDetails.refs.phone);
 submit = false;

 return false;
 }
 if (email == null || email == '') {
 this.props.alertFunc(envConstant.enterDetails,react.props.UserDetails.refs.email);
 submit = false;

 return false;
 }


 if ('' != fname || null != fname || '' == lname || null != lname) {

 submit = true;
 }
 if (null != fname || '' != fname) {
 const re = /^[a-zA-Z\ ]*$/;
 if (!re.test(fname)) {
 this.props.alertFunc(envConstant.invalidName,react.props.UserDetails.refs.fname);
 submit = false;
 return false;
 } else {
 submit = true;
 }
 }

 if (null != lname || '' != lname) {
 const re = /^[a-zA-Z\'\-\. ]*$/;
 if (!re.test(lname)) {
 this.props.alertFunc(envConstant.invalidName,react.props.UserDetails.refs.lname);
 submit = false;
 return false;
 } else {
 submit = true;
 }
 }
 if (null != phoneNum || '' != phoneNum) {
 if (vendor == "boots") {
 if (phoneNum.length != "11") {

this.props.alertFunc(envConstant.invalidPhnum,react.props.UserDetails.refs.phone);
 submit = false;
 return false;
 } else {
 submit = true;
 }
 } else if (vendor == "roi") {
 const re = /^[0]+[0-9]*$/;
 if (phoneNum.length != "11" || !re.test(phoneNum)) {
 this.props.alertFunc(envConstant.invalidPhnum,react.props.UserDetails.refs.phone);
 submit = false;
 return false;
 } else {
 submit = true;
 }
 } else {
 if (phoneNum.length != "10") {
 this.props.alertFunc(envConstant.invalidPhnum,react.props.UserDetails.refs.phone);
 submit = false;
 return false;
 } else {
 submit = true;
 }
 }


 }
 if (null != email || '' != email) {
 const re = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
 if (!re.test(email)) {
 this.props.alertFunc(envConstant.invalidEmail,react.props.UserDetails.refs.email);
 submit = false;
 return false;
 } else {
 submit = true;
 }
 }

 if (agree == "false" || null == agree) {
 this.props.alertFunc(envConstant.agreeTerms);
 submit = false;
 return false;
 }

 if (submit == true) {


 return true;
 }
 }


 validateNetwork() {
 var hasConn = window.navigator.onLine;
 if (hasConn) {
 return hasConn;
 }
 else {
 this.props.alertFunc(envConstant.networkFailure);
 }
 }

 orderSubmit(e) {
 const react = this;
 if (this.props.footer == envConstant.submitFoot) {

 window.sessionStorage.setItem('id', this.props.id);
 if (this.validateNetwork()) {
 if (this.validateSubmit()) {
 axios({
 method: 'post',
 url: react.props.urlValue + '/inputFields',
 data: submitOrder
 }).then((response) => {
 this.setState({loading:true});

 window.location.href = react.props.path;
 });
 }
 }
 }
 if (this.props.footer == envConstant.orderInfoFoot) {
 if (this.validateNetwork()) {
 let qty, productId;
 this.setState({loading:true});
 if (null == window.sessionStorage.getItem('qty') || 'null' == `window.sessionStorage.getItem('qty')) {`
 qty = 1;
 productId = window.sessionStorage.getItem('initprodID');
 } else {
 qty = window.sessionStorage.getItem('qty');
 productId = window.sessionStorage.getItem('prodID');
 }
 let path = this.props.path;
 let id = this.props.id;

 if (null != window.sessionStorage.getItem('coupon') && "null" != `window.sessionStorage.getItem('coupon')) {`

 if (window.sessionStorage.getItem('errorcode') == '' && null != `window.sessionStorage.getItem('coupon') &&` `window.sessionStorage.getItem('couponApplied') == "true") {`
 setTimeout(function () {
 if (window.sessionStorage.getItem('status1') != 'failure') {
 window.location.href = path + '?id=' + id + '&time=' + `window.sessionStorage.getItem('time') + '&prodId=' + productId + '&qty=' +` `qty + '&storeCall=true';`
 }
 },1500);
 }
 } 
 else {
 console.log('clicked');
 window.location.href = path + '?id=' + id + '&time=' + `window.sessionStorage.getItem('time') + '&prodId=' + productId + '&qty=' +` `qty + '&storeCall=true';`

 }

 }
 }
 if (this.props.footer == envConstant.ThankyouFoot) {
 let callBackUrl = this.props.callBackUrl;
 if (window.navigator.userAgent.includes("iPhone")) {
 window.location = "QP_DONE:DONE";
 } else {
 try {
 window.quickprint.onCheckoutComplete();
 } catch (e) {
 if (undefined != callBackUrl && '' != callBackUrl && null != callBackUrl) {
 if (callBackUrl.includes('?')) {
 window.location = callBackUrl + '?action=done';
 } else {
 window.location = callBackUrl + '&action=done';
 }
 }
 }
 }
 }
 }

 componentDidMount() {

 let footerHeight = this.refs.footerHeight.clientHeight;
 window.sessionStorage.setItem('footerHeight', footerHeight);

 }
 disableBtn(id) {

 window.sessionStorage.setItem('disable', "true");
 if(window.sessionStorage.getItem('alert1'+id)=="0" || `window.sessionStorage.getItem('alert1'+id)=="1" || `window.sessionStorage.getItem('alert1'+id)==1){
 alert(envConstant.priceInvalid);
 }else{
 x=0;
 window.sessionStorage.setItem('alert1'+id,x++);
 }


 //this.props.alertFunc(envConstant.priceInvalid)
 }


 render() {
 vendor = this.props.vendor;
 let copyrightsWrapper;
 if (vendor != "ts" && vendor != "roi") {
 copyrightsWrapper = (
 <Copyright copyRightMessage={this.props.copyRightMessage} />
 );
 }
 if (typeof window !== 'undefined') {
 window.sessionStorage.setItem('callBackUrl',this.props.callBackUrl);
 if (window.sessionStorage.getItem('status') == "success" || `window.sessionStorage.getItem('status') == "") {`

 if ((window.sessionStorage.getItem('status1') != "failure" || `window.sessionStorage.getItem('couponApplied') == "false") && `window.sessionStorage.getItem('flagDrop') != "true" &&` `window.sessionStorage.getItem('couponFocus') != "true") {

 var discTotal = `window.sessionStorage.getItem('discount').split(this.props.currency);`
 if (parseInt(discTotal[1]) > 998) {
 window.sessionStorage.setItem('alert1'+this.props.id,x++);
 this.disableBtn(this.props.id);
 } else {
 window.sessionStorage.setItem('disable', "false");
 }
 }
 }
 if (window.sessionStorage.getItem('status') == null) {
 if (window.sessionStorage.getItem('invalid') != 'true') {
 if (null == window.sessionStorage.getItem('total')) {

 var initTotal = `window.sessionStorage.getItem('inittotal').split(this.props.currency);`
 if (parseInt(initTotal[1]) > 998) {
 window.sessionStorage.setItem('alert1'+this.props.id,1);
 this.disableBtn(this.props.id);
 } else {
 window.sessionStorage.setItem('disable', "false");
 }
 } else {
 var prodTotal =       `window.sessionStorage.getItem('total').split(this.props.currency);`
 if (parseInt(prodTotal[1]) > 998) {
 window.sessionStorage.setItem('alert1'+this.props.id,1);
 this.disableBtn(this.props.id);
 } else {
 window.sessionStorage.setItem('disable', "false");
 }
 }
 }
 }

 if (window.sessionStorage.getItem('disable') == "true") {
 footerBtn = (
 <button type="button"
 className="btn-off supp-color btn-w1" `disabled="disabled">   {this.props.footer}</button>`
 );
 } else {
 footerBtn = (
 <button ref="footerBtn" type="button" className="btn-on supp-color btn-`w1" onClick={this.orderSubmit}>{this.props.footer}</button>`
 );
 }


 }else{
 footerBtn = (
 <button ref="footerBtn" type="button" className="btn-on supp-color btn-w1" >{this.props.footer}</button>
 );
 }
 return (
 <div className="op-footer footer_height" ref="footerHeight" id="footerValue">
 {copyrightsWrapper}
 <div className="background-white">

 <div className={'sweet-loading '+ this.state.loading}>
 <ClipLoader color={'#a0a0a0'} loading={this.state.loading}/>
 </div>

 {footerBtn}
</div>
 </div>
 );
 }
}

export default Footer;