2016-11-30 81 views
0

我有一个奇怪的问题。我写了一个简单的播放器应用程序与原生反应,在模拟器中一切都很好。但是当涉及到真实设备时,其播放按钮无法正常工作。我尝试了iPhone 6s和iPhone 5上的应用程序。问题是播放按钮在第二次点击时工作。第一个水龙头什么都不做。TouchableHighlight单击不工作两件作品

这里是我的整个渲染代码:

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> 
    ); 
    } 

,这是它的外观像模拟器: Screenshot of the app when the player screen launched

我试图改变播放按钮的位置(我的意思是我把它放在应用程序的顶部),它的工作。但我不明白为什么它在左下角时不起作用?

谢谢你的回答。

回答

0

我发现了这个问题。问题是NavigatorIOS,它是PlayerScreen的父级,其渲染函数在其中给出。导航器有向后滑动手势,它阻止播放按钮上的第一次敲击。当我通过伪造其interactivePopGestureEnabled pro来禁用导航器的向后滑动手势时,播放按钮正常工作。