TouchableHighlightワンクリックで2つの作品が動作しない

Question

私は奇妙な問題を抱えています。私は反応ネイティブのシンプルなプレーヤーアプリを書いて、すべてがシミュレータでうまくいきます。しかし、それは実際のデバイスになると、その再生ボタンが正しく動作しません。私はiPhone 6sとiPhone 5でこのアプリを試しました。問題は、再生ボタンが2番目のタップで動作することです。最初のタップは何もしません。

render() { 
    let playIcon = this.state.isPlaying ? 'pause' : 'play'; 
    let titleA = 'Set A: ' + (this.state.isASet ? this._toTime(this.state.pointA) : '-'); 
    let titleB = 'Set B: ' + (this.state.isBSet ? this._toTime(this.state.pointB) : '-'); 
    let time = this._toTime(this.state.time); 
    let remaining = this._toTime(this.state.duration - this.state.time); 
    return (
     <View style={styles.container}> 
     <View style={styles.info}> 
      <Text>Name: {this.props.song.name}</Text> 
      <Text>Artist: {this.props.song.artist.name}</Text> 
      <Text># of channels: {this.props.song.tracks.length}</Text> 
     </View> 
     <View style={styles.channels}> 
      { 
      this.props.song.tracks.map((track, index) => { 
       return (
       <VolumeSlider 
        key={index} 
        title={track.name} 
        volume={this.state.channelVolumes[index]} 
        onVolumeChange={this._handleChannelVolumeChange.bind(this, index)} 
        onMutePress={this._handleChannelMutePress.bind(this, index)} 
        onSoloPress={this._handleChannelSoloPress.bind(this, index)} 
        isPlayingSolo={this.state.channelSolos[index]} 
       /> 
      ); 
      }) 
      } 
      <VolumeSlider 
      title='Main' 
      volume={this.state.mainVolume} 
      onVolumeChange={this._handleMainVolumeChange.bind(this)} 
      onMutePress={this._handleMainMutePress.bind(this)} 
      hideSolo={true} 
      /> 
     </View> 
     <View style={{flexDirection: 'row', justifyContent: 'center'}}> 
      <TouchableHighlight style={styles.button} onPress={this._handleAPress.bind(this)}> 
      <Text numberOfLines={1}>{titleA}</Text> 
      </TouchableHighlight> 
      <TouchableHighlight style={styles.button} onPress={this._handleBPress.bind(this)}> 
      <Text numberOfLines={1}>{titleB}</Text> 
      </TouchableHighlight> 
      <TouchableHighlight 
      style={styles.button} 
      onPress={this._handleClearLoopPress.bind(this)} 
      > 
      <Text numberOfLines={1}>Clear</Text> 
      </TouchableHighlight> 
     </View> 
     <View style={styles.player}> 
      <TouchableHighlight onPress={this._handlePlayPress.bind(this)}> 
      <Icon 
       name={playIcon} 
       style={styles.playButton} 
      /> 
      </TouchableHighlight> 
      <View style={styles.center}> 
      <Text style={styles.timelineText}>{time}</Text> 
      </View> 
      <View style={styles.sliderContainer}> 
      <Slider 
       style={[styles.slider, styles.timelineSlider]} 
       onSlidingComplete={this._handleTimelineChange.bind(this)} 
       maximumValue={this.state.duration} 
       value={this.state.time} 
       step={0.01} 
      /> 
      </View> 
      <View style={styles.center}> 
      <Text style={styles.timelineText}>-{remaining}</Text> 
      </View> 
     </View> 
     </View> 
    ); 
    } 

そして、これが、それはシミュレータ上でどのように見えるかです：：ここで

は私の全体のコードをレンダリングしている

私は再生ボタンの位置を変えてみました（私が意味する、私はでそれを置きますアプリのトップ）とそれが働いた。しかし、私はそれが左下にあるときになぜ動作しないのか分かりません。

ありがとうございました。

Answer 1

問題が見つかりました。問題は、NavigatorIOSです。これは、レンダリング機能が下に示されているPlayerScreenの親です。ナビゲータにはスワイプバックジェスチャがあり、再生ボタンの最初のタップをブロックします。 interactivePopGestureEnabled proを無効にしてナビゲータのスワイプバックジェスチャーを無効にすると、再生ボタンが正常に機能しました。