React Native - Почему в Android используется задержка переключения модального режима при использовании избыточности для видимого состояния? - PullRequest
Новая
       20

React Native - Почему в Android используется задержка переключения модального режима при использовании избыточности для видимого состояния?

0 голосов
/ 04 декабря 2018

Итак, я создал пользовательский модал, и внутри модальной папки он имеет собственный редуктор и действия для переключения между приложениями.Я тестировал его в ios, и переключение было плавным, однако, когда я тестировал его на Android, была задержка, прежде чем модал открывается после нажатия кнопки, которая переключает его.Все, что было связано с редуксом в Android, в целом отстает.У меня также есть эта функция, которая позволяет пользователю сильно ударить карты, и была задержка также при отправке в обработчики смахивания.Есть ли обходной путь в этом или есть более эффективный способ отправки?

Вот мой код:

Для переключения кнопки: 

import React, { Component } from 'react' // eslint-disable-line no-unused-vars
import { connect } from 'react-redux'
import { Text, TouchableOpacity, Platform, View, StyleSheet } from 'react-native' // eslint-disable-line no-unused-vars
import styles from '../styles'
import { updateCoins, toggleCoinModal } from '../actions'
import { Add, Coin } from '../../../icons' // eslint-disable-line no-unused-vars
import { responsiveWidth, responsiveFontSize, responsiveHeight } from 'react-native-responsive-dimensions' // eslint-disable-line no-unused-vars
import { Fonts } from '../../../utils/fonts'

class CoinAd extends Component {
  onToggleCoinModal = () => {
    this.props.onToggleCoinModal(!this.props.showCoinModal)
  }

  render () {
    let buttonWidth = responsiveWidth(20)
    let plusPos = responsiveWidth(17)

    if (this.props.coins != null) {
      let string = this.props.coins.toString()
      string = string.replace('.', '')
      let length = string.length

      buttonWidth = responsiveWidth(20 + (length - 1) * 4)
      plusPos = responsiveWidth(17 + (length - 1) * 4)
    }

    let buttonStyle = StyleSheet.create({
      ads: {
        position: 'absolute',
        justifyContent: 'flex-end',
        alignItems: 'center',
        alignSelf: 'center',
        flexDirection: 'row',
        height: responsiveWidth(12),
        width: buttonWidth,
        borderTopLeftRadius: 12,
        borderBottomLeftRadius: 12,
        backgroundColor: '#F9627D',
        top: responsiveHeight(19.3),
        right: 0,
        zIndex: 1000,
        shadowOpacity: 0.32,
        shadowRadius: 12,
        shadowColor: '#000000',
        shadowOffset: { height: 0, width: 0 }
      },
      plus: {
        zIndex: 1000,
        position: 'absolute',
        right: plusPos,
        height: responsiveWidth(6.2),
        width: responsiveWidth(6)
      },
      adsText: {
        fontSize: responsiveFontSize(2.6),
        marginTop: Platform.OS === 'ios' ? responsiveWidth(1.1) : 0,
        fontFamily: Fonts.GROBOLD,
        lineHeight: 30,
        color: 'white',
        textAlign: 'right',
        justifyContent: 'center',
        alignItems: 'center'
      }
    })

    return (
      <TouchableOpacity style={buttonStyle.ads} onPress={this.onToggleCoinModal}>
        <View style={buttonStyle.plus}>
          <Add />
        </View>
        <Text style={buttonStyle.adsText}>
          {this.props.coins}
        </Text>
        <View style={styles.adsCoin}>
          <Coin />
        </View>
      </TouchableOpacity>
    )
  }
}

const mapStateToProps = state => ({
  coins: state.coinModal.coins,
  showCoinModal: state.coinModal.showCoinModal
})

const mapDispatchToProps = dispatch => {
  return {
    onUpdateCoins: (coins) => dispatch(updateCoins(coins)),
    onToggleCoinModal: (showCoinModal) => dispatch(toggleCoinModal(showCoinModal))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(
  CoinAd)

// export default CoinAd

Для действия переключения:

export const toggleCoinModal = (showCoinModal) => {
  return {
    type: TOGGLE_COIN_MODAL,
    showCoinModal: showCoinModal
  }
}

Для модальных: 

import React, { Component } from 'react' // eslint-disable-line no-unused-vars
import { connect } from 'react-redux'
import { View, Text, TouchableOpacity, Modal } from 'react-native' // eslint-disable-line no-unused-vars
import styles from './styles' // eslint-disable-line no-unused-vars
import CoinDay from './CoinDay' // eslint-disable-line no-unused-vars
import { toggleCoinModal, updateCoins, adCoinReward, updateClaimReward, claimReward, updateAdvert } from './actions'
import { toggleLoadingModal } from '../LoadingModal/actions'
import { } from '../../'
import { Close, CoinBalance, Play } from '../../icons' // eslint-disable-line no-unused-vars
import { InterstitialAdManager } from 'react-native-fbads'
// import firebase from 'react-native-firebase'

class CoinModal extends Component {
  state = {
    adsLoading: false
  }

  onToggleModal = () => {
    this.props.onToggleCoinModal(!this.props.showCoinModal)
  }

  componentWillUnmount () {
    clearInterval(this.interval)
  }

  render () {
    return (
      <Modal
        visible={this.props.showCoinModal}
        animationType="fade"
        transparent={true}
        onRequestClose={() => console.log('closed')}
      >
        <View style={styles.modal}>
          <View style={styles.titleContainer}>
            <Text style={styles.title}>Free Bongga Coins!</Text>
          </View>
          <View style={styles.balanceContainer}>
            <View style={styles.coinImageContainer}>
              <View style={styles.coinImage}>
                <CoinBalance />
              </View>
              <Text style={styles.balanceText}>BC</Text>
            </View>
            <View style={styles.currentBalanceContainer}>
              <Text style={styles.currentBalanceText}>
                Current Balance
              </Text>
              <Text style={styles.coinsText}>{this.props.coins} coins</Text>
            </View>
          </View>
          <View style={styles.loginTextCointainer}>
            <Text style={styles.loginText}>{'Mag-log in araw-araw para\nmakakuha ng FREE Bongga Coins!'}</Text>
          </View>
          <View style={styles.daysContainer}>
            <CoinDay selected={true} coinValue={1} day={1}/>
            <CoinDay selected={false} coinValue={1} day={2}/>
            <CoinDay selected={false} coinValue={1} day={3}/>
            <CoinDay selected={false} coinValue={1} day={4}/>
            <CoinDay selected={false} coinValue={2} day={5}/>
            <CoinDay selected={false} coinValue={2} day={6}/>
            <CoinDay selected={false} coinValue={3} day={7}/>
          </View>
          <View style={styles.nextRewardContainer}>
            {this.renderClaimReward()}
          </View>
          <View style={styles.adsContainer}>
            <TouchableOpacity style={styles.playAdButton} onPress={this.playAd} disabled={this.state.adsLoading}>
              <View style={styles.playAdContainer}>
                <View style={styles.playButton}>
                  <Play />
                </View>
              </View>
              <View style={styles.playAdTextContainer}>
                <Text style={styles.buttonText}>Get more Bongga Coins!</Text>
              </View>
            </TouchableOpacity>
          </View>
          <View style={styles.closeContainer}>
            <TouchableOpacity style={styles.closeButton} onPress={this.onToggleModal}>
              <Close />
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    )
  }
}

const mapStateToProps = state => ({
  coins: state.coinModal.coins,
  showCoinModal: state.coinModal.showCoinModal,
  rewardClaimed: state.coinModal.rewardClaimed,
  advert: state.coinModal.advert
})

const mapDispatchToProps = dispatch => {
  return {
    onUpdateCoins: (coins) => dispatch(updateCoins(coins)),
    onToggleCoinModal: (showCoinModal) => dispatch(toggleCoinModal(showCoinModal)),
    onAdCoinReward: () => dispatch(adCoinReward()),
    updateClaimReward: (hasClaimed) => dispatch(updateClaimReward(hasClaimed)),
    claimReward: () => dispatch(claimReward()),
    updateAdvert: (advert) => dispatch(updateAdvert(advert)),
    onToggleLoadingModal: (showLoadingModal) => dispatch(toggleLoadingModal(showLoadingModal))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(
  CoinModal)
...