ネイティブは、（a）は、音楽プレーヤー - ネイティブビデオ反応し、プログレスバーの機能を実現する反応

ネイティブは、（a）は、音楽プレーヤー - ネイティブビデオ反応し、プログレスバーの機能を実現する反応

特徴：

1.カードの曲のスライド

2.プログレスバーを表示します

レンダリング：

サードパーティのコンポーネント：

1.react-ネイティブビデオ

Githubの住所：https://github.com/react-native-community/react-native-video

2.reactネイティブ・アニメーション・タブ

Githubの住所：https://github.com/philipshurpik/react-native-animated-tabs

ダウンロード：

NPMを使用します：

npm install --save react-native-video
npm install --save react-native-animated-tabs

または糸を使用しました：

yarn add react-native-video
yarn add react-native-animated-tabs

RNバージョン> = 0.60、自動リンクする場合は、手動で0.60をリンクする必要がある場合

运行 `react-native link react-native-video` 连接react-native-video库

react-native-animated-tabs同上

カードのスライド機能

1.インポートコンポーネント必要

import AnimatedTabs from "react-native-animated-tabs";

2.コンポーネント

 <AnimatedTabs
          panelWidth={getPanelWidth()}
          activePanel={this.state.activePanel}
          onAnimateFinish={activePanel => this.setState({ activePanel })}
        >
        /**
        此处放你的卡片
        <View><Image source={...}/></View>
        ...
        */
  </AnimatedTabs>

3.ボタンスイッチカード

 <View style={styles.buttons}>
          <TouchableOpacity
            style={styles.text}
            onPress={() => this.goToPanel(-1)}
          >
            <Text>上一首歌</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.text}
            onPress={() => this.goToPanel(1)}
          >
            <Text>下一首歌</Text>
          </TouchableOpacity>

4.goToPanel（）関数

goToPanel(direction) {
    const nextPanel = this.state.activePanel + direction;

    if (nextPanel >= 0 && nextPanel < panelsCount) {
      this.setState({ activePanel: nextPanel });
    }
  }
}

今回はスライドカードの機能を実現することができます

図の例：

反応-ネイティブビデオの挿入音楽を使用

1.インポート必要なコンポーネントと音楽

import Video from "react-native-video";
import url1 from "../static/video/徐小明-渔歌.mp3";

2.コンポーネント

<Video
     source={require('./background.mp4')} // 视频的URL地址，或者本地地址
     //source={require('./music.mp3')} // 可以播放音频
    //source={{uri:'http://......'}}
     ref='player'
     rate={this.state.isPlay?1:0}                   // 控制暂停/播放，0 代表暂停paused, 1代表播放normal.
     volume={1.0}               
    // 声音的放声音的放大倍数大倍数，0 为静音  ，1 为正常音量 ，更大的数字表示放大的倍数
     muted={false}                  // true代表静音，默认为false.
     paused={false}                 // true代表暂停，默认为false
     resizeMode="contain"           // 视频的自适应伸缩铺放行为，contain、stretch、cover
     repeat={false}                 // 是否重复播放
     playInBackground={false}       // 当app转到后台运行的时候，播放是否暂停
     playWhenInactive={false}       // [iOS] Video continues to play when control or notification center are shown. 仅适用于IOS
     onLoadStart={this.loadStart}   // 当视频开始加载时的回调函数
     onLoad={this.setDuration}      // 当视频加载完毕时的回调函数
     onProgress={this.setTime}      //  进度控制，每250ms调用一次，以获取视频播放的进度
     onEnd={this.onEnd}             // 当视频播放完毕后的回调函数
     onError={this.videoError}      // 当视频不能加载，或出错后的回调函数
     style={styles.backgroundVideo}
                  />

3. Iは、成分の特性のいくつかを設定します

 <Video
            ref={video => (this.player = video)}
            source={SONGS[this.state.activePanel].url}
            ref="video"
            paused={this.state.paused}                          
            onLoad={data => this.setDuration(data)}         
            volume={1.0}
            paused={false}
            onEnd={() => this.goToPanel(1)}
            playInBackground={true}
            onProgress={e => this.setTime(e)}
            playWhenInactive={true}
          />

機能4.使用

 constructor() {
    super();

    this.state = {
      activePanel: 0,                   //当前active的面板
      activeSong: SONGS[0],             //正在播放的歌
      currentTime: 0.0,                 //当前播放的时间
      paused: 1.0,                      //播放
      sliderValue: 0,                   //进度条的进度
      duration: 0.0                     //总时长
    };
  }
  //格式化音乐播放的时间为0：00
  formatMediaTime(duration) {
    let min = Math.floor(duration / 60);
    let second = duration - min * 60;
    min = min >= 10 ? min : "0" + min;
    second = second >= 10 ? second : "0" + second;
    return min + ":" + second;
  }
  
  //设置进度条和播放时间的变化
  setTime(data) {
    let sliderValue = parseInt(this.state.currentTime);
    this.setState({
      slideValue: sliderValue,
      currentTime: data.currentTime
    });
  }

    //设置总时长
  setDuration(duration) {
    this.setState({ duration: duration.duration });
  }

プログレスバーの設定

 <Slider
            style={styles.slider}
            value={this.state.slideValue}
            maximumValue={this.state.duration}
            step={1}
            onValueChange={value => this.setState({ currentTime: value })}
          />