React Native跳转+播放（其实只想吐槽）

         

 

上面的效果实现后，我真的，我透。。。什么鬼玩意组建啊。想说一下问题，我本来将跳转实现放一个项目test2，播放又放另一个项目test3中，这两者在不同的项目中都能正常实现，但是当组合在一起时，准确的说，只要在跳转项目里面下载播放组建，我都没放任何播放的代码，这个项目直接歇菜。我尝试不同的项目，大多数项目，只要下载了播放的组件，那个项目就直接废了。。我他喵。。。

唉，要么react native迟早要被淘汰，要么过一阵子我歇菜，看来我不适合学代码。

组件：

跳转需要的：

1.使用以下命令安装react-navigation： npm install --save react-navigation

2.npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

3.执行命令安装react-navigation-stack： npm install react-navigation-stack @react-native-community/masked-view

播放需要的组件：

1.npm install @react-native-community/slider --save

2.npm install react-native-video --save

 

写下来是放代码：

app.js

import React, { Component } from 'react';
import { 
  StyleSheet, 
  View,
} from 'react-native';

import StackNavDemo from './StackNavDemo';

export default class App extends Component{

 render() {
    return (
      <View style={styles.container}>
      <StackNavDemo/>
    </View>
     );
  }
}

const styles = StyleSheet.create({
   container: {
     flex: 1,
   }
 });

StackNavDemo.js

import React from "react";
import { 
  View, 
  Text, 
  Button 
} from "react-native";
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import DetailsScreen from './DetailsScreen'

//跳转页面知识（单页）
//要显示的首页内容
 class HomeScreen extends React.Component { 
    render() {
      return (
     
        <View  style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
          <Text>Home Screen</Text>
          <Button	//给第一个页面HomeScreen增加按钮进行跳转
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details', {msg: "传给你了"})}
        />
        </View>
      );
    }
  }
  //将要跳转的页面放在函数里面
const AppNavigator = createStackNavigator({
    Home: HomeScreen,
    Details: DetailsScreen,
  });
  //export default createAppContainer(AppNavigator);
  const StackNavDemo = createAppContainer(AppNavigator);
  export default StackNavDemo; 
  

 

DetailsScreen.js

import React from "react";
import { 
  View, 
  Text, 
  Button 
} from "react-native";
import VideoPlayer from './VideoPlayer';

export default class DetailsScreen extends React.Component {
    render() {
        const {params} = this.props.navigation.state;
      return (  
        <View >
         <VideoPlayer/>
          <Text>{ params.msg }</Text>
          <Button style={{ flex: 1, alignItems: "flex-start", justifyContent: "flex-start" }}
          title="返回"
          onPress={() => {this.props.navigation.goBack()}} />
        </View>
      );
    }
  }

 

VideoPlayer.js

import React, { Component } from 'react';
import { 
  StyleSheet, 
  TouchableOpacity,
  TouchableWithoutFeedback,
  View,
  Image,
  Text
} from 'react-native';

import Video from 'react-native-video';
import Slider from '@react-native-community/slider'

export default class VideoPlayer extends Component {
  constructor(props) {
    super(props);
    this.state={
      paused: true,  //是否暂停音频播放
      playImg: require('./Video/video.png'), //播放/暂停图片
      currentTime: 0.0,  //当前播放时间
      duration: 0.0,  //当前音频的总时长
    }
    this.video;  //获取Video组件，ref相当于id
  }

  render() {
    return (
      <View>
        <TouchableWithoutFeedback onPress={this.playAndPaused}>
          <Video
              ref={ref => { this.video = ref }}
              source={require('./Video/test.mp4')}
              resizeMode={'cover'}
              paused={this.state.paused}
              onLoad={this.onLoad}
              onProgress={this.onProgress}
              onEnd={this.onEnd}
              repeat={false}
              style={{height: 270}}
          />
        </TouchableWithoutFeedback>

        
        <View style={styles.control}>
          <TouchableOpacity onPress={this.playAndPaused}>
            <Image source={this.state.playImg} style={{width:40,height:40}}/>
          </TouchableOpacity>
         
          <Text style={styles.time}>
            {this.formatMediaTime(this.state.currentTime)}
          </Text>
          
          <Slider value={this.state.currentTime}
            style={{flex: 1}} 
            maximumValue={this.state.duration}
            onValueChange={this.onValueChange}
            minimumTrackTintColor={'green'}
            maximumTrackTintColor={'#fff'}/>

          <View style={{width:80}}>
            <Text style={styles.time}>
              {this.formatMediaTime(this.state.duration)}
            </Text>
          </View>
        </View>
      </View> 
    );
  }

  onValueChange = (value) => {
    //当进度条被拖动或点击时，将音频跳转到对应点继续播放
    this.video.seek(value);
  }

  onLoad = (data) => {
    //音频加载完成时获取时长，作为进度条的最大值
    this.setState({ duration: data.duration });
  };

  onProgress = (data) => {
    //每隔一段时间获取音频播放进度，更新进度条
    this.setState({ currentTime: data.currentTime });
  };

  onEnd = () => {
    //当音频播放完毕，将进度条和音频归0
    this.setState({ 
      paused: true, 
      currentTime: 0,
      playImg: require('./Video/video_play.png')
    });
    this.video.seek(0);
  };

  playAndPaused = () => {
    //点击暂停/播放按钮，暂停/播放音频
    this.setState({ paused: !this.state.paused });

    if (this.state.paused) {
      this.setState({playImg: require('./Video/video_pause.png')});

    } else {
      this.setState({playImg: require('./Video/video_play.png')});
    }
  }

  //将单位为s的音乐播放时间格式化为0：00
  formatMediaTime = (duration) => {
    let min = Math.floor(duration / 60);
    let second = Math.floor(duration - min * 60);
    min = min >= 10 ? min : "0" + min;
    second = second >= 10 ? second : "0" + second;
    return min + ":" + second;
  }
}

const styles = StyleSheet.create({
  time: {
    fontSize: 20,
    color: '#fff'
  },
  control: {
    height: 60, 
    flexDirection: 'row', 
    alignItems: 'center', 
    position: 'absolute', 
    top: 200, 
    zIndex: 5, 
    width: '100%',
    margin: 10}
});

求求哪位神仙告诉我应该怎么做吧，我受不了了。。实在难受这个播放组建。