Излучение одного события вызывает другое событие в реагировать родной - PullRequest
Новая
       14

Излучение одного события вызывает другое событие в реагировать родной

1 голос
/ 06 июня 2019

Контекст: я рендеринг веб-просмотра и кнопки навигации находятся на верхней панели.Я отправляю событие, когда нажата кнопка навигации назад.И точно так же с кнопкой вперед он запускает событие.Проблема в том, что когда я нажимаю кнопку «назад», она также вызывает срабатывание кнопки «вперед».При этом на консоли написано, нажата кнопка назад и нажата кнопка вперед.Такое поведение происходит только в Android, в IOS он работает отлично.Я не уверен, что мне не хватает в сторону Android.Мой компонент выглядит следующим образом. 

import _EventEmitter from 'EventEmitter'
const appEventEmitter = new _EventEmitter()

export { appEventEmitter }

import React, { Component } from 'react'
import {
  StyleSheet,
  ScrollView,
} from 'react-native'
import { connect } from 'react-redux'
import { WebView } from 'react-native-webview'
import { Linking } from 'react-native'
import Spinner from 'react-native-loading-spinner-overlay'
import { appEventEmitter } from 'src/common'
import { Icon } from 'react-native-elements'

const goBack = 'goBack'
const goForward = 'goForward'

class HomeComponent extends Component {

  static navigationOptions = ({navigation}) => {
    return {
      headerRight:(
        <Icon
          iconStyle={styles.chevronColor}
          name="chevron-right"
          onPress={() => appEventEmitter.emit(goForward) }
          size={40}
      />),
      headerLeft:(
        <Icon
          iconStyle={styles.chevronColor}
          name="chevron-left"
          onPress={() => appEventEmitter.emit(goBack) } // This causes to fire back and forward events
          size={40}
      />),
    }
  }

  constructor(props) {
    super(props);
    this.state = {
      webViewRef: "webViewRef",
      visible: true,
    }
  }

  componentDidMount () {
    this.goBackListenerId = appEventEmitter.addListener(goBack, () => this.goBack())
    this.goForwardListenerId = appEventEmitter.addListener(goForward, () => this.goForward())
  }

  componentWillUnmount () {
    appEventEmitter.removeListener(this.goBackListenerId)
    appEventEmitter.removeListener(this.goForwardListenerId)
  }

  goBack = () => {
    console.log("BACK PRESSED")
    this.refs[this.state.webViewRef].goBack();
  }

  goForward = () => {
    console.log("Forward PRESSED")
    this.refs[this.state.webViewRef].goForward();
  }

  hideSpinner() {
    this.setState({ visible: false });
  }

  showSpinner() {
    this.setState({ visible: true });
  }

  render() {
    return (
      <ScrollView contentContainerStyle={styles.scrollableContainer}>
        <Spinner
          visible={this.state.visible}
          style={styles.spinnerColor}
        />
        <WebView
          source={{uri: BASE_URL}}
          style={styles.container}
          onLoadStart={() => this.showSpinner()}
          onLoadEnd={() => this.hideSpinner()}
          ref={this.state.webViewRef}
          javaScriptEnabled={true}
          domStorageEnabled={true}
          geolocationEnabled={true}
          cacheEnabled={true}
        />
      </ScrollView>
    )
  }
}

const styles = StyleSheet.create({
  scrollableContainer: {
    flex: 1,
  },
  spinnerColor: {
    color: 'white'
  },
  navigationHeader: {
    backgroundColor: colors.primary,
  },
  container: {
    flex: 1,
  },
  chevronColor: {
    color: 'white'
  }
});


const Home = connect()(HomeComponent)
export { Home }
...