Question

嘿，我正在尝试制作一个播放离线播放列表的应用，我有一个带有带轨道的视图的scrollView，然后将它们放置在一个名为PlaylistElements []的数组中，难以获取点击的轨道视图的位置，非常重要，因为我将其用作获取音频文件的名称和文件路径的索引。

注意：我已经尝试为每个跟踪元素赋予一个索引值，但是由于我正在使用for循环将这些跟踪元素推入数组中，所以它不起作用

 for (i = 0; i < PlayList.length; i++) {

      if(i%5 !== 0){
            let addTrackElement = PlaylistElements;
            console.log(PlaylistElements.length + "  " + i)
            //console.log(this.props.children)
           // console.log(PlaylistElements[i].type.render.length)
           // this.position = i;
     // console.log(styles.playlistElementContainer)
      addTrackElement.push(

        <TouchableOpacity style={styles.playlistElementContainer}
                           activeOpacity={0.9}
                           //ref={()=>{i}}

                           onPress={()=>{
                            if (this.playbackInstance != null) {
                              this.index = i;
                              this
                              .playbackInstance
                              .pauseAsync();
                              this._loadNewPlaybackInstance(this.state.shouldPlay);
                            }else if(this.playbackInstance === null){
                              this._loadNewPlaybackInstance(this.state.shouldPlay);
                            }
                            }}

                           >

                          <Image
                          style={{width: 40,
                                  height: 40,
                                  borderWidth : 1,
                                  borderRadius: 5,
                                 // flex : 1,
                                  marginRight: 5,
                                  marginLeft: 5,
                                  borderColor : 'black',}}
                          source={require('./assets/Images/reactIcon.png')}
                          />
                        <View>
                          <Text 
                          style={{//borderWidth: 2,
                                    lineHeight: 20,
                                    //color: 'white'
                                 }}>

                          { PlayList[i].name}
                          </Text> 
                          <Divider style={{ height : 1,
                                            backgroundColor: '#383838',
                                             }} />
                           <Text 
                           style={{//borderWidth: 2,
                                   lineHeight: 20}}>
                           testttttttttttttttttttttt
                           </Text> 
                            </View>
                      </TouchableOpacity>

                    );
                   }else if(i%5 === 0){
                      let addTrackElement = PlaylistElements;
                      console.log(PlaylistElements.length + "  " + i)
                      // console.log(styles.playlistElementContainer)
                       addTrackElement.push(
                         <View style={styles.adSpace}>        

                         </View>
                       );
                    }


                }

注2：我还尝试给PlaylistElements []添加一个事件列表器，然后映射单击的曲目，但出现此错误：“ item.addeventlistner不是函数”。

下来是我在componentdidmount（）内部调用的代码：

  getPosition(){
    //first store array in a variable
let container = [...PlaylistElements];

//loop through array with forEach function
container.forEach(item => {
    item.addEventListener('click', () => {
        console.log(container.indexOf(item));
    });
});

  }

Answer 1

  this.index = i;

this.index包含一个循环将始终获得最新值，因为每次循环迭代都覆盖相同的变量。

您可以做的是创建一个单独的方法，以索引为参数来播放和调用它。

class Playlist extends Component {
  constructor(props) {
    super(props);
    this.playTrack = this.playTrack.bind(this);
  }

  playTrack(index) {
    console.log(`you should play track ${i}`);
  }

  render() {
    return {
         // your loop thing
         // and your component,
         // but the important bit is 
           onPress={() => {
             this.playTrack(i);
           }

    }
  }

由于您在注释中提到您的代码此时很混乱，因此我创建了一个更简单的示例，您可以在其中看到简单的模式。

https://gist.github.com/alfonsodev/4efa70aa382c481259cb777dee85fdac

无法将播放列表与音频播放器同步

1 个答案: